/* =========================================================
   SHIFTY EYE GAMES — KNOWLEDGE BASE DESIGN TOKENS
   Linear shell · Notion canvas · Stripe metrics
   ========================================================= */

:root {
  /* ---------- Type scale ---------- */
  --text-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --text-base: 0.9375rem;            /* 15px — dense, product-grade */
  --text-md: 1rem;                   /* 16px — reading body */
  --text-lg: 1.125rem;               /* 18px — subheads */
  --text-xl: 1.375rem;               /* 22px — page titles */
  --text-2xl: 1.75rem;               /* 28px — rare, reading hero */

  /* Reading canvas tuned for long-form pages */
  --text-read: 1.0625rem;            /* 17px — Notion-like body */
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-read: 1.7;

  /* ---------- Spacing (4px grid) ---------- */
  --s1: 0.25rem;  --s2: 0.5rem;  --s3: 0.75rem;
  --s4: 1rem;     --s5: 1.25rem; --s6: 1.5rem;
  --s8: 2rem;     --s10: 2.5rem; --s12: 3rem;
  --s16: 4rem;    --s20: 5rem;   --s24: 6rem;

  /* ---------- Radius ---------- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --r-2xl: 18px; --r-full: 9999px;

  /* ---------- Shell (ALWAYS DARK — Linear style) ---------- */
  --shell-bg:       #0B0D12;
  --shell-surface:  #101319;
  --shell-hover:    #161A22;
  --shell-active:   #1C2230;
  --shell-border:   #1E222B;
  --shell-divider:  #181C24;
  --shell-text:     #E6E7EB;
  --shell-text-muted:#8A8F9B;
  --shell-text-faint:#5A6070;

  /* ---------- Reading canvas — light default ---------- */
  --bg:            #FAFAF7;           /* warm paper */
  --canvas:        #FFFFFF;
  --surface:       #FBFAF6;
  --surface-2:     #F4F3EE;
  --surface-sunk:  #F1EFE9;
  --border:        #E7E5DE;
  --border-strong: #D9D6CC;
  --divider:       #EDEBE4;

  --ink:           #15171B;
  --ink-2:         #2A2D34;
  --muted:         #60646C;
  --faint:         #8C8F98;
  --placeholder:   #B3B5BC;

  /* ---------- Accent (primary) — confident indigo ---------- */
  --accent:         #4C52E4;
  --accent-hover:   #3F45D6;
  --accent-soft:    #E9EAFC;
  --accent-ink:     #1C1F7A;
  --accent-ring:    rgba(76, 82, 228, 0.22);

  /* ---------- Semantic ---------- */
  --ok:          #1F8F4E;
  --ok-bg:       #E6F4EC;
  --ok-ink:      #0F5A30;

  --warn:        #B5721A;
  --warn-bg:     #FAF1DC;
  --warn-ink:    #6E4510;

  --risk:        #C53030;
  --risk-bg:     #FBE4E4;
  --risk-ink:    #7E1F1F;

  --info:        #1F6FB5;
  --info-bg:     #E4EFFA;
  --info-ink:    #154977;

  --neutral-bg:  #EFEEE7;
  --neutral-ink: #3A3D44;

  /* Source system chips */
  --src-jira:   #1868DB;
  --src-azdo:   #0078D4;
  --src-slack:  #4A154B;
  --src-drive:  #1E8E3E;
  --src-wiki:   #5A3EBA;
  --src-notion: #2A2A2A;

  /* ---------- Confidence meter ---------- */
  --conf-high:   #1F8F4E;
  --conf-med:    #B5721A;
  --conf-low:    #C53030;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 0 rgba(20, 22, 30, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 22, 30, 0.05), 0 0 0 1px rgba(20, 22, 30, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 22, 30, 0.06), 0 0 0 1px rgba(20, 22, 30, 0.04);
  --shadow-lg: 0 16px 40px rgba(20, 22, 30, 0.10), 0 0 0 1px rgba(20, 22, 30, 0.05);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 320ms;

  /* ---------- Layout ---------- */
  --sidebar-w: 244px;
  --rail-w: 296px;
  --topbar-h: 52px;
  --content-max: 820px;
  --content-wide: 1160px;

  /* ---------- Fonts ---------- */
  --font-ui: "Inter Tight", "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-read: "Newsreader", "Iowan Old Style", "Source Serif Pro", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Dark mode (canvas becomes dark too) ---------- */
[data-theme="dark"] {
  --bg:            #121520;
  --canvas:        #171A26;
  --surface:       #141724;
  --surface-2:     #1C2030;
  --surface-sunk:  #101320;
  --border:        #262A3A;
  --border-strong: #343A50;
  --divider:       #1E2230;

  --ink:           #E6E7EB;
  --ink-2:         #C4C6CD;
  --muted:         #8A8F9B;
  --faint:         #5A6070;
  --placeholder:   #464C5A;

  --accent:        #7077F5;
  --accent-hover:  #8A90F8;
  --accent-soft:   #1D2040;
  --accent-ink:    #C8CBFC;

  --ok:    #39C174; --ok-bg:   #12251B; --ok-ink:   #A6E7BF;
  --warn:  #E0A441; --warn-bg: #2B1F0C; --warn-ink: #F3D48C;
  --risk:  #E06060; --risk-bg: #2C1414; --risk-ink: #F5B6B6;
  --info:  #62A8E8; --info-bg: #12223A; --info-ink: #AFD2F3;
  --neutral-bg: #1A1E28; --neutral-ink: #C4C6CD;

  --accent-ring: rgba(112, 119, 245, 0.3);

  --shadow-xs: 0 1px 0 rgba(0,0,0,0.35);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05);
}