/**
 * design_tokens.css
 *
 * Single source of truth for theme variables, the universal element reset,
 * the body baseline, and the @property declarations consumed by component
 * animations (aurora hairlines, compose-box conic gradient).
 *
 * Every public page MUST link this file BEFORE its own page CSS. No page
 * CSS file is allowed to redeclare :root tokens. See
 * ai_agents_folder/ai_agent_instructions/03_design_guideline.md.
 */

/* ---------- Houdini animated angle for conic-gradient hairlines ---------- */
@property --ang {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@property --shimmer-x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

/* ---------- Theme tokens ---------- */
:root[data-theme="light"] {
    --canvas:        #fafbff;
    --surface:       #ffffff;
    --surface-2:     #f4f5fb;
    --hairline:      rgba(15, 17, 21, 0.06);
    --hairline-2:    rgba(15, 17, 21, 0.10);
    --shadow-soft:   0 1px 2px rgba(15,17,21,0.04), 0 8px 24px rgba(15,17,21,0.04);
    --shadow-pop:    0 1px 2px rgba(15,17,21,0.04), 0 16px 40px rgba(15,17,21,0.08);
    --modal-backdrop: rgba(0, 0, 0, 0.62);

    --text:          #0a0d1a;
    --text-2:        #5a5d66;
    --text-3:        #8a8e99;

    /* --iris is Indigo 600 (#4f46e5) for WCAG AA 4.5:1 contrast on white
       (#6366f1 lands at ~4.0:1 and fails AA on body-size labels and links).
       --iris-2 stays as Indigo 500 (#6366f1) for the secondary stop in the
       brand 3-stop gradient (iris -> cyan -> violet). */
    --iris:          #4f46e5;
    --iris-2:        #6366f1;
    --cyan:          #22d3ee;
    --violet:        #a855f7;
    --green:         #00b970;
    --green-2:       #009d5f;
    --red:           #ef4444;
    --amber:         #f59e0b;

    --iris-tint:     rgba(79, 70, 229, 0.10);
    --iris-tint-2:   rgba(79, 70, 229, 0.16);
    --iris-glow:     0 6px 24px rgba(79, 70, 229, 0.28);
    --green-tint:    rgba(0, 185, 112, 0.12);
    --red-tint:      rgba(239, 68, 68, 0.10);

    --aurora-1:      rgba(135, 206, 250, 0.55);
    --aurora-2:      rgba(255, 196, 175, 0.45);
    --aurora-3:      rgba(180, 240, 210, 0.45);
    --aurora-4:      rgba(210, 190, 255, 0.50);
    --aurora-5:      rgba(190, 230, 255, 0.45);
    --aurora-blur:   90px;
    --aurora-opacity: 0.85;
    --aurora-blend:  multiply;
    --aurora-blob-opacity: 0.55;
}

:root[data-theme="dark"] {
    --canvas:        #06060e;
    --surface:       #0d0d18;
    --surface-2:     #14141f;
    --hairline:      rgba(255, 255, 255, 0.06);
    --hairline-2:    rgba(255, 255, 255, 0.10);
    /* Subtle in dark mode: heavy black shadows on a dark canvas read as
       grimy black halos around every card. We use a very low alpha and
       tight blur so cards float without visible shadow blooms. */
    --shadow-soft:   0 1px 2px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.18);
    --shadow-pop:    0 2px 4px rgba(0,0,0,0.22), 0 12px 28px rgba(0,0,0,0.28);
    --modal-backdrop: rgba(0, 0, 0, 0.62);

    --text:          #f1f1f4;
    --text-2:        #a3a6b3;
    --text-3:        #6e7180;

    --iris:          #818cf8;
    --iris-2:        #6366f1;
    --cyan:          #22d3ee;
    --violet:        #c084fc;
    --green:         #10c97c;
    --green-2:       #00b970;
    --red:           #f87171;
    --amber:         #fbbf24;

    --iris-tint:     rgba(129, 140, 248, 0.16);
    --iris-tint-2:   rgba(129, 140, 248, 0.24);
    --iris-glow:     0 8px 32px rgba(129, 140, 248, 0.45);
    --green-tint:    rgba(16, 201, 124, 0.16);
    --red-tint:      rgba(248, 113, 113, 0.14);

    --aurora-1:      rgba(99, 102, 241, 0.55);
    --aurora-2:      rgba(34, 211, 238, 0.50);
    --aurora-3:      rgba(168, 85, 247, 0.55);
    --aurora-4:      rgba(45, 212, 191, 0.45);
    --aurora-5:      rgba(129, 140, 248, 0.45);
    --aurora-blur:   100px;
    --aurora-opacity: 0.65;
    --aurora-blend:  screen;
    --aurora-blob-opacity: 1;
}

/* ---------- Universal reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    /* `overflow-x: clip` clips horizontal overflow (e.g. the off-canvas
       mobile drawer translated -100%) WITHOUT establishing a scroll-
       containing block. The previous `body { overflow-x: hidden }` did
       create a scroll container, which silently broke `position: sticky`
       on the feed-page rails (the rails would stay fixed relative to
       <body>, which never scrolls, so visually they moved with the page
       instead of sticking to the viewport). */
    overflow-x: clip;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--canvas);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ---------- Unified modern scrollbars (repo-wide) ----------
   Thin, rounded, theme-aware. Track is transparent, thumb uses a soft
   token that brightens on hover. Applies to every scrollable surface
   in the app so we never see the default OS gray bar. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--hairline-2) transparent;
}
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: var(--hairline-2);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color 0.2s ease;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--iris);
    background-clip: padding-box;
    border: 2px solid transparent;
}
*::-webkit-scrollbar-corner { background: transparent; }