/* =============================================================
   Design Tokens
   Editorial Modern - Orque Tech
   ============================================================= */

:root {
    /* -------- Color -------- */
    --color-bg:            #fafafa;          /* warm off-white base */
    --color-surface:       #ffffff;          /* card / panel */
    --color-surface-alt:   #f5f5f5;          /* hover / subtle fill */
    --color-fg:            #111111;          /* primary text (near-black) */
    --color-fg-strong:     #0a0a0a;          /* display headings */
    --color-fg-muted:      #777777;          /* secondary text */
    --color-fg-subtle:     #bbbbbb;          /* captions, timestamps */
    --color-border:        #e0e0e0;          /* hairline */
    --color-border-strong: #cfcfcf;          /* emphasized hairline */

    --color-accent:        #c8102e;          /* editorial red */
    --color-accent-hover:  #a80d24;          /* darker red on hover */
    --color-accent-soft:   #fdecee;          /* tinted background */

    /* -------- Typography --------
       System Japanese stack — zero network cost, renders instantly.
       Hiragino on macOS/iOS, Yu Gothic / BIZ UDP on Windows, Noto on Linux/Android. */
    --font-body:  -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'BIZ UDPGothic', 'Yu Gothic', Meiryo, sans-serif;
    /* Instrument Serif for Latin display; Japanese characters fall through to
       system mincho which pairs cleanly with the Latin serif. */
    --font-serif: 'Instrument Serif', 'Hiragino Mincho ProN', 'Yu Mincho', 'BIZ UDMincho', Georgia, serif;

    /* Modular scale (1.250 — Major Third) */
    --fs-xs:   0.72rem;   /* 11.5px — labels, captions */
    --fs-sm:   0.82rem;   /* 13px   — small UI */
    --fs-base: 0.95rem;   /* 15px   — body copy */
    --fs-md:   1rem;      /* 16px   — prominent body */
    --fs-lg:   1.1rem;    /* 17.5px — card titles */
    --fs-xl:   1.4rem;    /* 22.5px — sub headings */
    --fs-2xl:  1.75rem;   /* 28px   — section titles on small */
    --fs-3xl:  2.2rem;    /* 35px   — hero h1 on small */
    --fs-4xl:  3rem;      /* 48px   — large headings */
    --fs-5xl:  4.2rem;    /* 67px   — hero h1 on large */

    /* Letter spacing for labels */
    --ls-tight:  -0.01em;
    --ls-normal: 0;
    --ls-wide:   0.04em;
    --ls-wider:  0.15em;   /* uppercase labels */

    /* Line heights */
    --lh-tight: 1.2;
    --lh-snug:  1.4;
    --lh-body:  1.75;
    --lh-loose: 2;

    /* -------- Spacing scale (8px base) -------- */
    --space-1:  0.25rem;   /* 4px  */
    --space-2:  0.5rem;    /* 8px  */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */

    /* -------- Layout -------- */
    --container-max: 1200px;
    --container-narrow: 880px;
    --page-gutter-x: 3rem;
    --page-gutter-x-mobile: 1.5rem;

    /* -------- Radius -------- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* -------- Shadow -------- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);

    /* -------- Motion -------- */
    --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:   150ms;
    --dur-base:   300ms;
    --dur-slow:   700ms;

    /* -------- Z-index -------- */
    --z-nav:     100;
    --z-overlay: 900;
    --z-modal:   1000;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 1ms;
        --dur-base: 1ms;
        --dur-slow: 1ms;
    }
}