/* ============================================================
   Seed Code Chat — Design Tokens
   Inherits the Seed Code CLI visual identity:
   near-black surfaces, white/grey typography, Seed Code green
   ============================================================ */

:root {
  /* ---- Surfaces (near-black, subtle green cast) ---- */
  --bg: #09090B;
  --surface: #0D0F0E;
  --surface-2: #111412;
  --surface-3: #161A17;
  --surface-4: #1B201C;

  /* ---- Lines & borders ---- */
  --border: #252927;
  --border-strong: #343A36;

  /* ---- Typography ---- */
  --text: #F5F5F5;
  --text-2: #C9CECB;
  --muted: #7F8582;
  --muted-2: #5C625F;

  /* ---- Brand (Seed Code green) ---- */
  --brand: #22C55E;
  --brand-strong: #2ECC71;   /* CLI green */
  --brand-soft: #7BED9F;
  --brand-deep: #1B7A43;
  --brand-glow: rgba(46, 204, 113, 0.16);
  --brand-glow-strong: rgba(46, 204, 113, 0.34);
  --brand-dim: rgba(34, 197, 94, 0.10);

  /* ---- Semantic ---- */
  --danger: #F87171;
  --danger-bg: rgba(239, 68, 68, 0.10);
  --warning: #FBBF24;
  --warning-bg: rgba(245, 158, 11, 0.10);
  --info: #38BDF8;
  --info-bg: rgba(56, 189, 248, 0.10);
  --ok: var(--brand);

  /* ---- Elevation / shadow ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 0 1px var(--brand-glow), 0 8px 28px var(--brand-glow);
  --shadow-focus: 0 0 0 3px var(--brand-glow);

  /* ---- Radii ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* ---- Typography scale ---- */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;

  /* ---- Fonts ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "Fira Code", ui-monospace,
    SFMono-Regular, "Segoe UI Mono", Consolas, monospace;

  /* ---- Layout metrics ---- */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 72px;
  --header-h: 60px;
  --composer-max-w: 780px;
  --content-max-w: 800px;
  --chat-max-w: 760px;

  /* ---- Motion ---- */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-med: 220ms;
  --t-slow: 300ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Z-index scale ---- */
  --z-dropdown: 40;
  --z-scrim: 60;
  --z-drawer: 70;
  --z-modal: 80;
  --z-toast: 90;

  /* ---- Scrollbar ---- */
  --scrollbar-w: 10px;
}

/* ---- Light theme (optional; still Seed Code identity) ---- */
html[data-theme="light"] {
  --bg: #F6F8F6;
  --surface: #FFFFFF;
  --surface-2: #F1F4F1;
  --surface-3: #E8EDE9;
  --surface-4: #DCE3DE;
  --border: #DFE5E0;
  --border-strong: #C7D1CA;
  --text: #0F1712;
  --text-2: #31403A;
  --muted: #5D6A63;
  --muted-2: #87938C;
  --brand: #16A34A;
  --brand-strong: #15803D;
  --brand-soft: #22C55E;
  --brand-deep: #15803D;
  --brand-glow: rgba(22, 163, 74, 0.14);
  --brand-glow-strong: rgba(22, 163, 74, 0.30);
  --brand-dim: rgba(22, 163, 74, 0.09);
  --shadow-1: 0 1px 2px rgba(16, 24, 20, 0.06);
  --shadow-2: 0 4px 16px rgba(16, 24, 20, 0.08);
  --shadow-3: 0 12px 40px rgba(16, 24, 20, 0.14);
  --shadow-glow: 0 0 0 1px rgba(22, 163, 74, 0.16), 0 8px 28px rgba(22, 163, 74, 0.12);
  --shadow-focus: 0 0 0 3px rgba(22, 163, 74, 0.18);
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    --bg: #F6F8F6;
    --surface: #FFFFFF;
    --surface-2: #F1F4F1;
    --surface-3: #E8EDE9;
    --surface-4: #DCE3DE;
    --border: #DFE5E0;
    --border-strong: #C7D1CA;
    --text: #0F1712;
    --text-2: #31403A;
    --muted: #5D6A63;
    --muted-2: #87938C;
    --brand: #16A34A;
    --brand-strong: #15803D;
    --brand-soft: #22C55E;
    --brand-deep: #15803D;
    --brand-glow: rgba(22, 163, 74, 0.14);
    --brand-glow-strong: rgba(22, 163, 74, 0.30);
    --brand-dim: rgba(22, 163, 74, 0.09);
    --shadow-1: 0 1px 2px rgba(16, 24, 20, 0.06);
    --shadow-2: 0 4px 16px rgba(16, 24, 20, 0.08);
    --shadow-3: 0 12px 40px rgba(16, 24, 20, 0.14);
    --shadow-glow: 0 0 0 1px rgba(22, 163, 74, 0.16), 0 8px 28px rgba(22, 163, 74, 0.12);
    --shadow-focus: 0 0 0 3px rgba(22, 163, 74, 0.18);
  }
}