/* ============================================================
   Reset & Design Tokens — 中古スマホのフクロウ
   デザイン案A: やわらかトラスト / brandHue=235 (ネイビー)
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Brand / Accent */
    --hue: 235;
    --color-primary: oklch(0.56 0.15 var(--hue));
    --color-primary-dark: oklch(0.46 0.17 var(--hue));
    --color-primary-soft: oklch(0.96 0.03 var(--hue));
    --color-primary-soft-2: oklch(0.91 0.06 var(--hue));
    --color-accent: #ff8a3d;
    --color-accent-soft: #fff1e6;

    /* Ink scale */
    --color-text: #15211b;
    --color-text-2: #4e6359;
    --color-text-light: #8ea197;

    /* Surface */
    --color-bg: #fafaf7;
    --color-surface: #ffffff;
    --color-white: #ffffff;
    --color-line: #e7ece8;
    --color-line-2: #f0f4f1;
    --color-border: var(--color-line);

    /* Functional */
    --color-green: #16a364;
    --color-green-soft: #e6f7ee;
    --color-danger: #e11d48;

    /* Ranking (Gold/Silver/Bronze) */
    --gold: #e5a400;
    --gold-2: #ffcd3b;
    --gold-ink: #5a3d00;
    --gold-bg: #fff8e7;
    --gold-price: #b67800;
    --silver: #8b96a6;
    --silver-2: #c6ced9;
    --bronze: #c17a3a;
    --bronze-2: #e5a268;
    --cta-orange: linear-gradient(135deg, #ff9a2e, #ff6a00);

    /* Condition badges */
    --color-badge-a: #059669;
    --color-badge-b: #ea580c;
    --color-badge-c: #64748b;

    /* Typography */
    --font-base: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-num: 'Inter', 'Noto Sans JP', sans-serif;

    /* Radius */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* Shadow */
    --shadow-1: 0 1px 2px rgba(16, 22, 31, 0.04), 0 2px 6px rgba(16, 22, 31, 0.04);
    --shadow: var(--shadow-1);
    --shadow-2: 0 4px 20px rgba(16, 22, 31, 0.08);
    --shadow-hover: 0 10px 28px rgba(16, 22, 31, 0.12);
    --shadow-rank: 0 6px 20px rgba(16, 24, 40, 0.07);

    /* Motion */
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "palt";
    letter-spacing: 0.01em;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    width: 100%;
}

input, select, button, textarea {
    font-family: inherit;
    font-size: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

::selection {
    background: var(--color-primary-soft-2);
    color: var(--color-text);
}