/* ============================================================
   Design Tokens
   Single source of truth for colors, type, spacing, motion.
   Change a value here and it ripples through the whole site.
   ============================================================ */

:root {
  /* ---------- Color: warm neutral greys ---------- */
  --bg:             #0f0f0e;
  --surface:        #16161505;
  --surface-solid:  #1a1a19;
  --elevated:       #242422;
  --border:         #2f2f2c;
  --border-strong:  #3d3d39;

  --text:           #ededeb;
  --text-soft:      #c8c8c3;
  --text-muted:     #8a8a86;
  --text-faint:     #5a5a56;

  /* ---------- Accent (one, used sparingly) ---------- */
  --accent:         #c9b48a;  /* warm taupe */
  --accent-dim:     #8a7e5f;
  --accent-glow:    rgba(201, 180, 138, 0.12);

  /* ---------- Syntax colors (warm, restrained) ---------- */
  --code-keyword:   #d4a27f;  /* orange-taupe: func, var, if, return */
  --code-type:      #a8c5b5;  /* sage: Vector2, String, bool */
  --code-string:    #c9b48a;  /* warm taupe: strings */
  --code-number:    #e0b877;  /* amber: numbers */
  --code-comment:   #5a5a56;  /* faint grey: comments */
  --code-decorator: #b89878;  /* dusty amber: @export, @abstract */
  --code-function:  #ededeb;  /* primary text: function names */
  --code-operator:  #8a8a86;  /* muted: =, +, -, : */
  --code-bg:        #111110;

  /* ---------- Typography ---------- */
  --font-display:   "Fraunces", Georgia, serif;
  --font-body:      "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:      "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:    0.75rem;     /* 12px */
  --fs-sm:    0.875rem;    /* 14px */
  --fs-base:  1rem;        /* 16px */
  --fs-md:    1.125rem;    /* 18px */
  --fs-lg:    1.375rem;    /* 22px */
  --fs-xl:    1.875rem;    /* 30px */
  --fs-2xl:   2.5rem;      /* 40px */
  --fs-3xl:   4rem;        /* 64px */

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  /* ---------- Spacing (8px base) ---------- */
  --s-1:  0.25rem;   /*  4px */
  --s-2:  0.5rem;    /*  8px */
  --s-3:  0.75rem;   /* 12px */
  --s-4:  1rem;      /* 16px */
  --s-5:  1.5rem;    /* 24px */
  --s-6:  2rem;      /* 32px */
  --s-7:  3rem;      /* 48px */
  --s-8:  4rem;      /* 64px */
  --s-9:  6rem;      /* 96px */

  /* ---------- Layout ---------- */
  --content-max:    72rem;
  --prose-max:      42rem;
  --radius-sm:      4px;
  --radius-md:      6px;
  --radius-lg:      10px;

  /* ---------- Motion ---------- */
  --ease:           cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:       150ms;
  --dur-base:       250ms;
  --dur-slow:       450ms;
}