/*
  OLORUGUNTHEDREAD — Design Tokens
  Terminal dark aesthetic. Phosphor green on near-black.
  Cabinet Grotesk (display) + JetBrains Mono (body/code).
*/

@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ── Type scale ── */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.2vw, 0.8125rem);
  --text-sm:   clamp(0.8125rem,0.78rem + 0.3vw, 0.9375rem);
  --text-base: clamp(0.9375rem,0.9rem  + 0.2vw, 1.0625rem);
  --text-md:   clamp(1.0625rem,1rem    + 0.4vw, 1.25rem);
  --text-lg:   clamp(1.25rem,  1.1rem  + 0.8vw, 1.75rem);
  --text-xl:   clamp(1.75rem,  1.3rem  + 1.5vw, 2.75rem);
  --text-2xl:  clamp(2.5rem,   1.5rem  + 3vw,   4.5rem);
  --text-hero: clamp(3rem,     1rem    + 6vw,    7rem);

  /* ── Spacing (4px base) ── */
  --s1:  0.25rem;   /* 4px  */
  --s2:  0.5rem;    /* 8px  */
  --s3:  0.75rem;   /* 12px */
  --s4:  1rem;      /* 16px */
  --s5:  1.25rem;   /* 20px */
  --s6:  1.5rem;    /* 24px */
  --s7:  1.75rem;   /* 28px */
  --s8:  2rem;      /* 32px */
  --s10: 2.5rem;    /* 40px */
  --s12: 3rem;      /* 48px */
  --s16: 4rem;      /* 64px */
  --s20: 5rem;      /* 80px */
  --s24: 6rem;      /* 96px */

  /* ── Fonts ── */
  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;

  /* ── Radius ── */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-full: 9999px;

  /* ── Transitions ── */
  --ease: 160ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Content widths ── */
  --w-narrow:  640px;
  --w-default: 880px;
  --w-wide:    1160px;
}

/* ── DARK THEME (default) ── */
:root, [data-theme="dark"] {
  --bg:          #0a0a09;
  --bg-2:        #0f0f0e;
  --bg-3:        #141413;
  --bg-4:        #1a1a18;
  --border:      #252522;
  --border-2:    #2e2e2a;
  --text:        #d4d2ca;
  --text-muted:  #6a6860;
  --text-faint:  #3a3835;
  --text-inv:    #0a0a09;

  /* Phosphor green accent */
  --accent:      #39d353;
  --accent-dim:  #1d6b2a;
  --accent-glow: rgba(57, 211, 83, 0.08);

  /* Amber for warnings */
  --warn:        #e8b04a;
  --warn-dim:    rgba(232,176,74,0.1);

  /* Red for danger */
  --danger:      #e05c4a;
  --danger-dim:  rgba(224,92,74,0.1);

  /* Code */
  --code-bg:     #0d1117;
  --code-text:   #c9d1d9;
  --code-border: #21262d;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg:          #f4f3ef;
  --bg-2:        #f9f8f4;
  --bg-3:        #ffffff;
  --bg-4:        #edecea;
  --border:      #dddbd5;
  --border-2:    #d0cec7;
  --text:        #1a1917;
  --text-muted:  #6a6860;
  --text-faint:  #b0aea8;
  --text-inv:    #f4f3ef;

  --accent:      #1a7a30;
  --accent-dim:  #d4f0da;
  --accent-glow: rgba(26,122,48,0.06);

  --warn:        #8a5c00;
  --warn-dim:    rgba(138,92,0,0.08);
  --danger:      #c43022;
  --danger-dim:  rgba(196,48,34,0.08);

  --code-bg:     #1e1e2e;
  --code-text:   #cdd6f4;
  --code-border: #313244;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f4f3ef; --bg-2: #f9f8f4; --bg-3: #ffffff; --bg-4: #edecea;
    --border: #dddbd5; --border-2: #d0cec7;
    --text: #1a1917; --text-muted: #6a6860; --text-faint: #b0aea8; --text-inv: #f4f3ef;
    --accent: #1a7a30; --accent-dim: #d4f0da; --accent-glow: rgba(26,122,48,0.06);
    --warn: #8a5c00; --warn-dim: rgba(138,92,0,0.08);
    --danger: #c43022; --danger-dim: rgba(196,48,34,0.08);
    --code-bg: #1e1e2e; --code-text: #cdd6f4; --code-border: #313244;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  }
}