/**
 * CSS Design Tokens
 * Premium "Warm Paper Editorial" Design System
 *
 * Two Palette Options:
 * - Option A: "Warm Linen" (default) - Rose-undertone warmth
 * - Option B: "Cool Parchment" - Gray-green undertone
 *
 * @package Editorial
 */

:root {
    /* ========================================
       TYPOGRAPHY TOKENS
       ======================================== */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-serif: Georgia, "Times New Roman", Times, serif;
    --font-mono: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

    /* Font Sizes - Refined scale */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.8125rem;    /* 13px - slightly larger for readability */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-hero: 3.125rem;   /* 50px - Home positioning statement */
    --text-6xl: 4.75rem;     /* 76px - "The Journal" / "Papers" mastheads (italic 500) */

    /* Line Heights - More generous */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 1.75;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* ========================================
       SPACING TOKENS
       ======================================== */
    --space-px: 1px;
    --space-0: 0;
    --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 */

    /* ========================================
       LAYOUT TOKENS - INTENTIONAL WIDTH SYSTEM
       Two contexts: reading (articles) and index (lists)
       ======================================== */

    /* Reading width: spacious prose column, 80ch max
       calm editorial reading, a touch wider than a strict 75ch */
    --width-reading: 80ch;

    /* Index width: spacious for lists, cards, navigation
       1024px = comfortable scanning, aligns with common breakpoints */
    --width-index: 64rem;

    --header-height: 72px;

    /* Border Radius - Subtle, not bubbly */
    --radius-none: 0;
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* ========================================
       ANIMATION TOKENS
       ======================================== */
    --transition-fast: 120ms ease-out;
    --transition-base: 200ms ease-out;
    --transition-slow: 300ms ease-out;

    /* ========================================
       PALETTE A: "THE JOURNAL" (Default)
       Cool warm-neutral surface, near-white cards, editorial-blue accent.

       Philosophy:
       - Warm-editorial voice on a cool, precise surface
       - Background is a cool warm-neutral; cards are near-white
       - Three distinct layers: page < card < well

       LAYERING:
       --bg:        #F1F0EB - page
       --surface:   #FFFFFF - cards, stats box, white chips
       --surface-2: #F6F5F1 - thumbnails, code, subtle wells
       ======================================== */

    /* Surfaces — cool warm-neutral, near-white cards */
    --bg: #F1F0EB;                    /* Page */
    --surface: #FFFFFF;               /* Cards, stats box, white chips */
    --surface-2: #F6F5F1;             /* Thumbnails, code, subtle wells */
    --surface-invert: #23201B;        /* Inverted surface for contrast */

    /* Text hierarchy */
    --text: #1B1D20;                  /* Primary text */
    --text-muted: #55585C;            /* Secondary text - readable but subordinate */
    --text-light: #8A8D92;            /* Tertiary/meta text - clearly ambient */
    --text-invert: #FAF8F5;           /* Text on dark surfaces */

    /* Borders — cool, hairline */
    --border: #E4E2DC;                /* Primary border */
    --border-light: #EDEBE4;          /* Subtle dividers */
    --border-strong: #D6D4CC;         /* Emphasized borders */

    /* Masthead band (Home/Blog/Papers header block): subtle top-light */
    --masthead-grad: linear-gradient(#FBFAF8, var(--bg));

    /* Accent — editorial blue is the default (see [data-accent="indigo"]).
       These :root values are the warm terracotta alternate. */
    --accent: #9d6b53;                /* Primary accent (terracotta alternate) */
    --accent-hover: #845a45;          /* Accent hover state */
    --accent-soft: rgba(157, 107, 83, 0.12);  /* Accent background tint */
    --accent-muted: rgba(157, 107, 83, 0.18); /* Slightly stronger tint */

    /* Links */
    --link: #9d6b53;                  /* Link color */
    --link-hover: #6b4a38;            /* Link hover */
    --link-visited: #7d5a47;          /* Visited link */

    /* Chips/Pills - VISIBLE states */
    --chip-bg: var(--surface);
    --chip-border: var(--border);
    --chip-text: var(--text-muted);
    --chip-hover-bg: var(--surface-2);
    --chip-hover-border: var(--border-strong);
    --chip-hover-text: var(--text);
    --chip-active-bg: var(--accent-soft);
    --chip-active-border: color-mix(in srgb, var(--accent) 30%, transparent);
    --chip-active-text: var(--accent);

    /* Interactive states */
    --focus-ring: rgba(157, 107, 83, 0.4);
    --selection: rgba(157, 107, 83, 0.15);

    /* Code */
    --code-bg: var(--surface-2);

    /* Shadows - soft paper-like depth, gravity at bottom */
    --shadow-soft: 0 1px 2px rgba(42, 38, 35, 0.05);
    --shadow-card: 0 1px 2px rgba(42, 38, 35, 0.04), 0 2px 4px rgba(42, 38, 35, 0.03), 0 4px 8px -2px rgba(42, 38, 35, 0.03);
    --shadow-md: 0 4px 6px -1px rgba(42, 38, 35, 0.06), 0 2px 4px -2px rgba(42, 38, 35, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(42, 38, 35, 0.06), 0 4px 6px -4px rgba(42, 38, 35, 0.04);

}

/* ========================================
   PALETTE B: "COOL PARCHMENT"
   Gray-green undertone, archival feel
   Uncomment this block to use instead
   ======================================== */
/*
:root {
    --bg: #f9f9f7;
    --surface: #f3f3f0;
    --surface-2: #eaeae6;
    --surface-invert: #3d3d3a;

    --text: #3d3d3a;
    --text-muted: #666662;
    --text-light: #8f8f89;
    --text-invert: #f9f9f7;

    --border: #e2e2dc;
    --border-light: #eaeae6;
    --border-strong: #d0d0c9;

    --accent: #6b7c6b;
    --accent-hover: #576657;
    --accent-soft: rgba(107, 124, 107, 0.1);
    --accent-muted: rgba(107, 124, 107, 0.15);

    --link: #6b7c6b;
    --link-hover: #4a5a4a;
    --link-visited: #5a6a5a;

    --chip-bg: transparent;
    --chip-border: var(--border);
    --chip-text: var(--text-muted);
    --chip-hover-bg: var(--surface-2);
    --chip-hover-border: var(--text-light);
    --chip-hover-text: var(--text);
    --chip-active-bg: var(--surface-2);
    --chip-active-border: var(--text);
    --chip-active-text: var(--text);

    --focus-ring: rgba(107, 124, 107, 0.4);
    --selection: rgba(107, 124, 107, 0.15);

    --code-bg: var(--surface);

    --shadow-soft: 0 1px 3px rgba(61, 61, 58, 0.04), 0 1px 2px rgba(61, 61, 58, 0.02);
    --shadow-md: 0 4px 6px -1px rgba(61, 61, 58, 0.05), 0 2px 4px -2px rgba(61, 61, 58, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(61, 61, 58, 0.06), 0 4px 6px -4px rgba(61, 61, 58, 0.04);
}
*/

/* ========================================
   DARK MODE
   Elegant, not harsh - avoids pure black

   Single source of truth: applied via both
   prefers-color-scheme and data-theme attribute.

   LAYERING:
   --bg:       #181615 (L: 8%)   - page
   --surface:  #232120 (L: 12.5%) - cards, chips (~4.5% step)
   --surface-2: #2d2a28 (L: 16.5%) - thumbnails, code (~4% step)
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="sepia"]) {
        /* Background layers - UNMISTAKABLE separation */
        --bg: #181615;
        --surface: #232120;
        --surface-2: #2d2a28;
        --surface-invert: #f5f2ed;

        /* Text hierarchy */
        --text: #e8e4de;
        --text-muted: #b0a99f;
        --text-light: #857e76;
        --text-invert: #181615;

        /* Borders - VISIBLE in dark mode */
        --border: #403c38;
        --border-light: #353230;
        --border-strong: #504b46;

        /* Accent - lighter for dark mode */
        --accent: #c99b7d;
        --accent-hover: #dab092;
        --accent-soft: rgba(201, 155, 125, 0.15);
        --accent-muted: rgba(201, 155, 125, 0.22);

        /* Links */
        --link: #c99b7d;
        --link-hover: #dab092;
        --link-visited: #b58a6d;

        /* Chips - VISIBLE states with accent */
        --chip-bg: var(--surface);
        --chip-border: var(--border);
        --chip-text: var(--text-muted);
        --chip-hover-bg: var(--surface-2);
        --chip-hover-border: var(--border-strong);
        --chip-hover-text: var(--text);
        --chip-active-bg: var(--accent-soft);
        --chip-active-border: var(--accent);
        --chip-active-text: var(--text);

        /* Interactive */
        --focus-ring: rgba(201, 155, 125, 0.4);
        --selection: rgba(201, 155, 125, 0.2);

        /* Code */
        --code-bg: var(--surface-2);

        /* Shadows - subtle depth in dark mode */
        --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px -2px rgba(0, 0, 0, 0.1);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
    }
}

/* ========================================
   ACCENT: EDITORIAL BLUE (default)
   The Journal accent. Override only the accent/link/focus/selection tokens.
   Composes with both default surface and dark mode.
   Applied via [data-accent="indigo"] on <html>.
   ======================================== */
[data-accent="indigo"] {
    --accent: #2F6DB4;
    --accent-hover: #245A98;
    --accent-soft: rgba(47, 109, 180, 0.10);
    --accent-muted: rgba(47, 109, 180, 0.16);

    --link: #2F6DB4;
    --link-hover: #1F4E8A;
    --link-visited: #3B6296;

    --focus-ring: rgba(47, 109, 180, 0.40);
    --selection: rgba(47, 109, 180, 0.14);
}

/* In dark mode, lift the editorial blue for visibility on dark surfaces. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="sepia"])[data-accent="indigo"] {
        --accent: #7FA8DB;
        --accent-hover: #9BBCE6;
        --accent-soft: rgba(127, 168, 219, 0.15);
        --accent-muted: rgba(127, 168, 219, 0.22);

        --link: #7FA8DB;
        --link-hover: #9BBCE6;
        --link-visited: #6E97CA;

        --focus-ring: rgba(127, 168, 219, 0.4);
        --selection: rgba(127, 168, 219, 0.2);
    }
}

[data-theme="dark"][data-accent="indigo"] {
    --accent: #7FA8DB;
    --accent-hover: #9BBCE6;
    --accent-soft: rgba(127, 168, 219, 0.15);
    --accent-muted: rgba(127, 168, 219, 0.22);

    --link: #7FA8DB;
    --link-hover: #9BBCE6;
    --link-visited: #6E97CA;

    --focus-ring: rgba(127, 168, 219, 0.4);
    --selection: rgba(127, 168, 219, 0.2);
}

/* Dark mode toggle class (for JS-controlled dark mode) - shares tokens with @media block above */
[data-theme="dark"] {
    --bg: #181615;
    --surface: #232120;
    --surface-2: #2d2a28;
    --surface-invert: #f5f2ed;
    --text: #e8e4de;
    --text-muted: #b0a99f;
    --text-light: #857e76;
    --text-invert: #181615;
    --border: #403c38;
    --border-light: #353230;
    --border-strong: #504b46;
    --accent: #c99b7d;
    --accent-hover: #dab092;
    --accent-soft: rgba(201, 155, 125, 0.15);
    --accent-muted: rgba(201, 155, 125, 0.22);
    --link: #c99b7d;
    --link-hover: #dab092;
    --link-visited: #b58a6d;
    --chip-bg: var(--surface);
    --chip-border: var(--border);
    --chip-text: var(--text-muted);
    --chip-hover-bg: var(--surface-2);
    --chip-hover-border: var(--border-strong);
    --chip-hover-text: var(--text);
    --chip-active-bg: var(--accent-soft);
    --chip-active-border: var(--accent);
    --chip-active-text: var(--text);
    --focus-ring: rgba(201, 155, 125, 0.4);
    --selection: rgba(201, 155, 125, 0.2);
    --code-bg: var(--surface-2);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px -2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
}