/*
 * base.css — design language: tokens, themes, element defaults.
 * Loaded FIRST on every page; the @layer statement below fixes the
 * cascade order for the whole site:
 *
 *   tokens      custom properties + theme overrides
 *   base        element defaults (typography, links, code, .container)
 *   components  shared UI (css/components.css)
 *   page        one sheet per page type (css/article.css, css/home.css)
 *
 * Later layers win, so page sheets override components and components
 * override base — no specificity wars. Per-page <style> blocks in
 * articles stay unlayered, which means they beat all four layers:
 * that's the supported escape hatch for one-off article styling.
 * Prefer overriding tokens (--accent, --card, …) over component internals.
 */

@layer tokens, base, components, page;

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ==========================================================================
   TOKENS - Variables & Theme Overrides
   ========================================================================== */

@layer tokens {
    :root {
        --background: #FCFCFC;
        --background-grey: #F3F5F7;
        --background-grey-dark: var(--gray-100);
        --border-light: var(--gray-200);
        --text-primary: var(--gray-900);
        --text-secondary: var(--gray-600);
        --text-bold: #0a0a0a;
        --primary: #0070EA;
        --red: #db4f4f;
        --code-text: #8B5CF6;
        --table-header: var(--gray-100);
        --table-first-col: var(--gray-50);

        /* Gray Scale */
        --gray-50: #F3F5F7;
        --gray-100: #E6E6E6;
        --gray-200: #CCCCCC;
        --gray-300: #B3B3B3;
        --gray-400: #999999;
        --gray-500: #808080;
        --gray-600: #666666;
        --gray-700: #4D4D4D;
        --gray-800: #333333;
        --gray-900: #1A1A1A;
        --gray-950: #121212;

        /* Semantic Color Tokens */
        /* Surfaces */
        --surface-base: var(--gray-50);
        --surface-raised: var(--gray-100);
        --surface-overlay: var(--gray-200);

        /* Borders */
        --border-subtle: var(--gray-200);
        --border-default: var(--gray-300);
        --border-strong: var(--gray-400);

        /* Text Hierarchy */
        --text-tertiary: var(--gray-500);
        --text-muted: var(--gray-400);
        --text-inverse: var(--gray-50);

        /* Interactive States */
        --hover-overlay: var(--gray-200);
        --active-overlay: var(--gray-300);
        --focus-ring: var(--primary);

        /* Utilities */
        --divider: var(--gray-300);
        --skeleton: var(--gray-200);
        --disabled: var(--gray-400);

        /* Spacing Scale - 8px base unit */
        --space-xs: 0.25rem;   /* 4px */
        --space-sm: 0.5rem;    /* 8px */
        --space-md: 1rem;      /* 16px */
        --space-lg: 1.5rem;    /* 24px */
        --space-xl: 2rem;      /* 32px */
        --space-2xl: 3rem;     /* 48px */
        --space-3xl: 4rem;     /* 64px */
        --space-4xl: clamp(4rem, 12vw, 6rem);  /* 64px mobile → 96px desktop */

        /* Border Radius Scale */
        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 12px;
        --radius-xl: 16px;

        /* Font Size Scale */
        --font-size-xs: 0.8rem;
        --font-size-sm: 0.9rem;
        --font-size-base: 0.95rem;
        --font-size-md: 1rem;
        --font-size-lg: 1.1rem;
        --font-size-xl: 1.3rem;
        --font-size-2xl: 2rem;
        --font-size-3xl: 3rem;
    }

    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            --background: #040404;
            --background-grey: var(--gray-50);
            --background-grey-dark: var(--gray-100);
            --border-light: var(--gray-200);
            --text-primary: var(--gray-900);
            --text-secondary: var(--gray-600);
            --text-bold: #ffffff;
            --primary: #0A84FF;
            --red: #db4f4f;
            --code-text: #A78BFA;
            --table-header: var(--gray-100);
            --table-first-col: var(--gray-50);


            /* Gray Scale (inverted for dark mode) */
            --gray-50: #121212;
            --gray-100: #1A1A1A;
            --gray-200: #333333;
            --gray-300: #4D4D4D;
            --gray-400: #666666;
            --gray-500: #808080;
            --gray-600: #999999;
            --gray-700: #B3B3B3;
            --gray-800: #CCCCCC;
            --gray-900: #E6E6E6;
            --gray-950: #F2F2F2;

            /* Semantic Color Tokens */
            /* Surfaces */
            --surface-base: var(--gray-50);
            --surface-raised: var(--gray-100);
            --surface-overlay: var(--gray-200);

            /* Borders */
            --border-subtle: var(--gray-200);
            --border-default: var(--gray-300);
            --border-strong: var(--gray-400);

            /* Text Hierarchy */
            --text-tertiary: var(--gray-500);
            --text-muted: var(--gray-400);
            --text-inverse: var(--gray-50);

            /* Interactive States */
            --hover-overlay: var(--gray-200);
            --active-overlay: var(--gray-300);
            --focus-ring: var(--primary);

            /* Utilities */
            --divider: var(--gray-300);
            --skeleton: var(--gray-200);
            --disabled: var(--gray-400);
        }
    }

    /* Theme Overrides - Force Light */
    html[data-theme="light"] {
        --background: #FCFCFC;
        --background-grey: #F3F5F7;
        --background-grey-dark: var(--gray-100);
        --border-light: var(--gray-200);
        --text-primary: var(--gray-900);
        --text-secondary: var(--gray-600);
        --text-bold: #0a0a0a;
        --primary: #0070EA;
        --red: #db4f4f;
        --code-text: #8B5CF6;
        --table-header: var(--gray-100);
        --table-first-col: var(--gray-50);

        /* Gray Scale */
        --gray-50: #F3F5F7;
        --gray-100: #E6E6E6;
        --gray-200: #CCCCCC;
        --gray-300: #B3B3B3;
        --gray-400: #999999;
        --gray-500: #808080;
        --gray-600: #666666;
        --gray-700: #4D4D4D;
        --gray-800: #333333;
        --gray-900: #1A1A1A;
        --gray-950: #121212;

        /* Semantic Color Tokens */
        /* Surfaces */
        --surface-base: var(--gray-50);
        --surface-raised: var(--gray-100);
        --surface-overlay: var(--gray-200);

        /* Borders */
        --border-subtle: var(--gray-200);
        --border-default: var(--gray-300);
        --border-strong: var(--gray-400);

        /* Text Hierarchy */
        --text-tertiary: var(--gray-500);
        --text-muted: var(--gray-400);
        --text-inverse: var(--gray-50);

        /* Interactive States */
        --hover-overlay: var(--gray-200);
        --active-overlay: var(--gray-300);
        --focus-ring: var(--primary);

        /* Utilities */
        --divider: var(--gray-300);
        --skeleton: var(--gray-200);
        --disabled: var(--gray-400);

        color-scheme: light;
    }

    /* Theme Overrides - Force Dark */
    html[data-theme="dark"] {
        --background: #040404;
        --background-grey: var(--gray-50);
        --background-grey-dark: var(--gray-100);
        --border-light: var(--gray-200);
        --text-primary: var(--gray-900);
        --text-secondary: var(--gray-600);
        --text-bold: #ffffff;
        --primary: #0A84FF;
        --red: #db4f4f;
        --code-text: #A78BFA;
        --table-header: var(--gray-100);
        --table-first-col: var(--gray-50);

        /* Gray Scale (inverted for dark mode) */
        --gray-50: #121212;
        --gray-100: #1A1A1A;
        --gray-200: #333333;
        --gray-300: #4D4D4D;
        --gray-400: #666666;
        --gray-500: #808080;
        --gray-600: #999999;
        --gray-700: #B3B3B3;
        --gray-800: #CCCCCC;
        --gray-900: #E6E6E6;
        --gray-950: #F2F2F2;

        /* Semantic Color Tokens */
        /* Surfaces */
        --surface-base: var(--gray-50);
        --surface-raised: var(--gray-100);
        --surface-overlay: var(--gray-200);

        /* Borders */
        --border-subtle: var(--gray-200);
        --border-default: var(--gray-300);
        --border-strong: var(--gray-400);

        /* Text Hierarchy */
        --text-tertiary: var(--gray-500);
        --text-muted: var(--gray-400);
        --text-inverse: var(--gray-50);

        /* Interactive States */
        --hover-overlay: var(--gray-200);
        --active-overlay: var(--gray-300);
        --focus-ring: var(--primary);

        /* Utilities */
        --divider: var(--gray-300);
        --skeleton: var(--gray-200);
        --disabled: var(--gray-400);

        color-scheme: dark;
    }

    /* Atelier surface tokens (cards, panels — css/atelier.css, DESIGN.md).
       Sitewide so the grammar works on any page. The light-mode text
       overrides ("light bg forgives less") must come after the defaults
       above — last declaration in the same layer wins. */
    :root {
        --mono: 'Monaco', 'Menlo', 'Consolas', monospace;
        --card: var(--background-grey);
        --card-edge: var(--border-subtle);
        --card-edge-hi: var(--border-default);
        --r-card: 20px;
        --r-panel: 24px;
    }
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) { --card: #0e0e0f; --card-edge: #232325; --card-edge-hi: #36363a; }
    }
    html[data-theme="dark"] { --card: #0e0e0f; --card-edge: #232325; --card-edge-hi: #36363a; }
    html[data-theme="light"] {
        --card: #ffffff; --card-edge: #ececec; --card-edge-hi: #d8d8d8;
        /* light bg forgives less — muted text steps one shade darker */
        --text-tertiary: var(--gray-600); --text-muted: var(--gray-500);
        --card-title: var(--gray-600);
    }
    @media (prefers-color-scheme: light) {
        :root:not([data-theme="dark"]) {
            --text-tertiary: var(--gray-600); --text-muted: var(--gray-500);
            --card-title: var(--gray-700);
        }
    }
}

/* ==========================================================================
   BASE - Element Defaults
   ========================================================================== */

@layer base {
    html {
        background-color: var(--background);
    }

    body {
        font-family: "Inter", serif;
        font-size: 16px;
        color: var(--text-primary);
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Typography - Headings */
    h1 {
        font-family: "Big Shoulders Display", serif;
        font-size: 3rem;
        margin: var(--space-md) 0;
        line-height: 1.2;
    }

    h2, h3, h4, p{
        font-family: 'Inter', sans-serif;
    }


    /* Heading ladder: 1rem → 1.25rem → 1.6rem (≥1.25 ratio between steps) */
    h2 {
        font-size: 1.4rem;
        font-weight: 600;
        margin: var(--space-3xl) 0 var(--space-md);
        letter-spacing: -0.3px;
        line-height: 1.3;
        color: var(--text-bold);
    }

    h3 {
        margin-top: var(--space-3xl);
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: var(--space-md);
        line-height: 1.35;
        color: var(--text-bold);
    }

    h4 {
        margin-top: var(--space-2xl);
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: var(--space-md);
        line-height: 1.6rem;
        color: var(--text-bold);
    }

    /* Typography - Lists */
    li {
        line-height: 1.5;
        margin-top: var(--space-sm);
    }

    /* Typography - Links */
    a:link, a:visited {
        text-decoration: none;
        color: var(--primary);
    }

    p a:hover {
        color: var(--red);
    }

    a[disabled], a.disabled {
        color: var(--disabled);
        pointer-events: none;
        opacity: 0.6;
    }

    /* Typography - Paragraphs */
    p {
        line-height: 1.5;
        margin: 0 0 var(--space-2xl);
    }

    /* Typography - Code */
    pre {
        font-size: 0.8rem;
        line-height: 1.6rem;
        margin: 0;
        padding: 0;
        background-color: var(--card);
        border: 1px solid var(--card-edge);
        border-radius: 12px;
        width: 100%;
        margin: var(--space-xl) 0;
        box-sizing: border-box;
    }

    code {
        padding: var(--space-lg);
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow-x: visible;
        font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
        color: var(--text-primary);
        display: block;
        border-radius: var(--radius-md);
    }

    p code, li code, td code, h1 code, h2 code, h3 code, h4 code {
        display: inline;
        padding: 0.15rem 0.4rem;
        color: var(--code-text);
        border-radius: 4px;
        font-size: 0.9em;
    }

    pre > code {
        margin: 0;
    }

    /* Typography - Lists (block spacing) */
    ul {
        margin: var(--space-lg) 0;
    }

    ol {
        padding-left: var(--space-lg);
        margin: var(--space-lg) 0;
    }

    li ul, li ol {
        margin: var(--space-sm) 0 0;
    }

    ol li {
        line-height: 1.5;
        margin-bottom: var(--space-sm);
    }

    /* Typography - Bold */
    b {
        font-weight: 600;
        color: var(--text-bold);
    }

    /* Horizontal Rule — Atelier hairline; the token themes itself */
    hr {
        border: none;
        border-top: 1px solid var(--card-edge);
    }

    /* Page Container */
    .container {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    @media only screen and (max-width: 768px) and (min-width: 481px) {
        .container {
            width: 90%;
        }
    }

    @media only screen and (max-width: 480px) {
        .container {
            width: 95%;
        }
    }

    /* Accessibility - Reduced Motion */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* The wipe — one motion, two mechanisms:
       - Theme switch: JS drives it via WAAPI on ::view-transition-new(root)
         (components/chrome/theme.js, same-document view transition). The
         pseudos below hold both snapshots still so only the WAAPI clip runs.
       - Page entry: a viewport-fixed curtain wiping away top-to-bottom
         (page-curtain in @layer page below; home uses at-rise). Deliberately
         NOT a cross-document view transition — browsers skip those
         unpredictably (~half the time even on localhost), so the curtain
         animates unconditionally instead. */
    @keyframes nav-wipe {
        from { clip-path: inset(0 0 100% 0); }
        to   { clip-path: inset(0); }
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
    }
}

@layer page {
    /* Page-entry curtain — the same top-to-bottom wipe as the theme
       switch, done as a viewport-fixed curtain that hides from the top
       down. Lives here (base.css is loaded warm on every page, incl. the
       homepage) so the wipe is present at first paint even on a cold
       first blog click — article.css, where this used to live, is never
       loaded by the homepage. Scoped via :has(.article-container) so only
       article pages play it (every blog wraps content in that container;
       the homepage does not) — body#top alone would miss the ~half of
       blogs that omit the id. It must be viewport-sized — clipping the
       article container itself crosses the screen in a few ms on long
       articles. Covers the chrome too. */
    body:has(.article-container)::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 999;
        background: var(--background);
        pointer-events: none;
        animation: page-curtain 500ms cubic-bezier(0.25, 1, 0.5, 1) both;
    }

    @keyframes page-curtain {
        from { clip-path: inset(0); }
        to   { clip-path: inset(100% 0 0 0); }
    }
}