/* =====================================================================
 * Groundwork — design tokens.
 * Anchored to the canonical Aristos brand style guide.
 * Quiet, institutional, matte — borders carry structure.
 * Dual mode: LIGHT is the default; DARK via :root[data-theme="dark"].
 * Components reference the semantic names below and flip automatically.
 * ===================================================================== */

:root {
    /* ---- Brand constants (mode-independent) ------------------------- */
    --brand-jacarta: #2D2769;
    --brand-lavender: #9889C0;
    --brand-steel: #241E31;
    --brand-athens: #E5E7EB;
    --brand-white: #FFFFFF;
    --brand-jacarta-rgb: 45,39,105;
    --brand-lavender-rgb: 152,137,192;
    --brand-steel-rgb: 36,30,49;

    --ok:        #2E9E5B;
    --warn:      #B8791A;
    --err:       #C4453E;

    /* =================================================================
     * LIGHT MODE (default) — paper-calm. Neutral surfaces, hairline
     * borders carry structure, one restrained Jacarta accent.
     * No gradients, no glow, no glass. (per ARCHITECTURE.md §8)
     * ================================================================= */
    color-scheme: light;

    /* Surfaces (legacy ink-* names kept so components flip for free) */
    --ink-0:     #F2F2F5;   /* page bg */
    --ink-1:     #FFFFFF;   /* surface (cards) */
    --ink-2:     #F6F6F9;   /* surface raised / subtle fill */
    --ink-3:     #ECECF1;   /* surface highest */
    --line:      rgba(22,20,40,.10);
    --line-soft: rgba(22,20,40,.06);
    --line-strong: rgba(22,20,40,.17);

    /* Text */
    --text-1:    #1F1D29;   /* primary ink */
    --text-2:    #595663;   /* secondary */
    --text-3:    #8B8894;   /* tertiary */
    --text-4:    #B2AFB9;   /* placeholder */

    /* Accent — Jacarta, used sparingly */
    --accent:    #2D2769;
    --accent-2:  #574E8C;   /* hover / secondary */
    --accent-3:  #ECEAF5;   /* faint accent fill (chat-bubble tint) */
    --on-accent: #FFFFFF;

    /* Chrome surfaces (flat, opaque — no blur) */
    --glass:     #FFFFFF;
    --glass-2:   #FFFFFF;
    --app-bg:    var(--ink-0);

    /* Shadows — minimal; borders do the structural work */
    --shadow-sm: 0 1px 2px rgba(22,20,40,.05);
    --shadow-md: 0 1px 2px rgba(22,20,40,.05), 0 4px 12px rgba(22,20,40,.05);
    --shadow-lg: 0 8px 28px rgba(22,20,40,.10);
    --shadow-hover: 0 4px 14px rgba(22,20,40,.09);
    --shadow-focus: 0 0 0 3px rgba(45,39,105,.16);

    /* ---- Type ------------------------------------------------------- */
    --font-system:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-editorial: Georgia, 'Times New Roman', serif;
    --font-mono:      'JetBrains Mono', Consolas, Menlo, monospace;

    --fs-12: 0.75rem;
    --fs-14: 0.875rem;
    --fs-15: 0.9375rem;
    --fs-17: 1.0625rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-28: 1.75rem;
    --fs-36: 2.25rem;

    --lh-tight:   1.2;
    --lh-snug:    1.35;
    --lh-normal:  1.55;
    --lh-reading: 1.7;

    /* ---- Geometry --------------------------------------------------- */
    --radius-xs:  6px;
    --radius-sm:  8px;
    --radius-md:  10px;
    --radius-lg:  12px;
    --radius-xl:  14px;
    --radius-xxl: 16px;
    --radius-pill: 999px;

    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   24px;
    --space-6:   32px;
    --space-7:   48px;
    --space-8:   64px;

    /* ---- Motion ----------------------------------------------------- */
    --motion-fast:  160ms cubic-bezier(.4, 0, .2, 1);
    --motion-base:  220ms cubic-bezier(.4, 0, .2, 1);
    --motion-slow:  360ms cubic-bezier(.4, 0, .2, 1);
    --motion-spring: 420ms cubic-bezier(.22, 1, .36, 1);

    /* ---- Layout ----------------------------------------------------- */
    --rail-w:    240px;
    --content-w: 760px;
    --side-w:    300px;
    --header-h:  56px;
}

/* =====================================================================
 * DARK MODE — Steel #241E31 base, Lavender accents, matte purple wave.
 * ===================================================================== */
:root[data-theme="dark"] {
    color-scheme: dark;

    --ink-0:     #141318;   /* page bg */
    --ink-1:     #1C1B22;   /* surface */
    --ink-2:     #24232C;   /* surface raised */
    --ink-3:     #2D2C36;   /* surface highest */
    --line:      rgba(255,255,255,.09);
    --line-soft: rgba(255,255,255,.055);
    --line-strong: rgba(255,255,255,.16);

    --text-1:    #ECEBF0;
    --text-2:    #A6A3B0;
    --text-3:    #757281;
    --text-4:    #54515E;

    --accent:    #9A8FD0;   /* lavender, readable on dark */
    --accent-2:  #B7AEE6;
    --accent-3:  #272335;   /* faint accent fill */
    --on-accent: #16141E;

    --glass:     #1C1B22;
    --glass-2:   #1C1B22;
    --app-bg:    var(--ink-0);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
    --shadow-md: 0 1px 2px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.30);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.45);
    --shadow-hover: 0 4px 14px rgba(0,0,0,.40);
    --shadow-focus: 0 0 0 3px rgba(154,143,208,.30);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast:  0ms linear;
        --motion-base:  0ms linear;
        --motion-slow:  0ms linear;
        --motion-spring: 0ms linear;
    }
}

/* ---- Base reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--app-bg);
    color: var(--text-1);
    font-family: var(--font-system);
    font-size: var(--fs-15);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

/* ---- Editorial body (Article body, current thinking) ------------- */
.editorial {
    font-family: var(--font-editorial);
    font-size: var(--fs-17);
    line-height: var(--lh-reading);
    color: var(--text-1);
}
.editorial p + p { margin-top: 1em; }

/* ---- Utility ------------------------------------------------------- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}