/**
 * 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 Messlier
 */

: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 */

    /* 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, 75ch max
       ~12-13 words per line, calm editorial reading */
    --width-reading: 75ch;

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

    /* Legacy aliases - kept for compatibility */
    --container-max: var(--width-index);
    --content-max: var(--width-reading);

    --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: "UNCOATED PAPER" (Default)
       Neutral-warm like book paper, not beige paint

       Philosophy:
       - Background is NEUTRAL (disappears when reading)
       - Warmth lives in SURFACES (cards carry the character)
       - Increased separation between layers

       LAYERING:
       --bg:       #fafafa (L: 98%) - page: neutral, almost white
       --surface:  #f5f2ed (L: 95%) - cards: warm, linen-like (~3% step)
       --surface-2: #ebe6de (L: 90%) - thumbnails: warmer still (~5% step)
       ======================================== */

    /* Background layers - neutral page, warm surfaces */
    --bg: #EEECE4;                    /* Page: warm cream */
    --surface: #f5f2ed;               /* Cards: warm linen, carries the character */
    --surface-2: #ebe6de;             /* Thumbnails, code: warmer, clearly different */
    --surface-invert: #3a3530;        /* Inverted surface for contrast */

    /* Text hierarchy */
    --text: #2a2623;                  /* Primary text - deeper charcoal */
    --text-muted: #5a534b;            /* Secondary text - readable but subordinate */
    --text-light: #8a827a;            /* Tertiary/meta text - clearly ambient */
    --text-invert: #faf8f5;           /* Text on dark surfaces */

    /* Borders - warm-tinted for cohesion with surfaces */
    --border: #e0dbd3;                /* Primary border - visible, warm */
    --border-light: #ebe6de;          /* Subtle dividers */
    --border-strong: #d0c9bf;         /* Emphasized borders */

    /* Accent - muted terracotta/rust */
    --accent: #9d6b53;                /* Primary accent */
    --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: var(--accent);
    --chip-active-text: var(--text);

    /* 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);

    /* Legacy color aliases for compatibility */
    --color-bg: var(--bg);
    --color-bg-alt: var(--surface);
    --color-bg-card: var(--surface);
    --color-text: var(--text);
    --color-text-muted: var(--text-muted);
    --color-text-light: var(--text-light);
    --color-heading: var(--text);
    --color-link: var(--link);
    --color-link-hover: var(--link-hover);
    --color-accent: var(--accent);
    --color-accent-light: var(--accent-soft);
    --color-border: var(--border);
    --color-border-light: var(--border-light);
    --color-code-bg: var(--code-bg);
    --color-selection: var(--selection);
}

/* ========================================
   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
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Background layers - UNMISTAKABLE separation in dark mode
           --bg:       #18161 (L: 8%) - page
           --surface:  #232120 (L: 12.5%) - cards, chips (~4.5% step)
           --surface-2: #2d2a28 (L: 16.5%) - thumbnails, code (~4% step) */
        --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);
    }
}

/* Dark mode toggle class (for JS-controlled dark mode) */
[data-theme="dark"] {
    /* Background layers - UNMISTAKABLE separation */
    --bg: #181615;
    --surface: #232120;
    --surface-2: #2d2a28;
    --surface-invert: #f5f2ed;

    --text: #e8e4de;
    --text-muted: #b0a99f;
    --text-light: #857e76;
    --text-invert: #181615;

    /* Borders - VISIBLE */
    --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;

    /* 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);

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

    --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);
}