/* app/assets/stylesheets/base/tokens.css
   ─────────────────────────────────────────────────────────────────────────────
   Single source of truth for every visual decision.
   All other CSS files reference these variables exclusively.
   ───────────────────────────────────────────────────────────────────────────── */

:root {

  /* ── Colour palette ──────────────────────────────────────────────────────── */

  /* Neutrals */
  --color-black:      #0a0a0a;
  --color-white:      #fafafa;
  --color-gray-050:   #f8f8f6;
  --color-gray-100:   #f3f3f0;
  --color-gray-200:   #e5e4e0;
  --color-gray-300:   #d1d0cb;
  --color-gray-400:   #a8a7a2;
  --color-gray-500:   #737370;
  --color-gray-700:   #3d3d3b;
  --color-gray-900:   #1c1c1a;

  /* Blue — titles, links, highlights, primary actions */
  --color-blue-050:   #eff6ff;
  --color-blue-100:   #dbeafe;
  --color-blue-200:   #bfdbfe;
  --color-blue-500:   #3b82f6;
  --color-blue-600:   #1a4fd6;
  --color-blue-700:   #1d4ed8;
  --color-blue-900:   #1e3a8a;

  /* Semantic — sentiment, risk, status */
  --color-green-100:  #dcfce7;
  --color-green-600:  #16a34a;
  --color-green-700:  #15803d;

  --color-amber-100:  #fef3c7;
  --color-amber-500:  #d97706;
  --color-amber-700:  #b45309;

  --color-red-100:    #fee2e2;
  --color-red-600:    #c0392b;
  --color-red-700:    #b91c1c;

  /* ── Semantic aliases ────────────────────────────────────────────────────── */

  --bg-page:          var(--color-gray-100);
  --bg-surface:       var(--color-white);
  --bg-sunken:        var(--color-gray-050);

  --border-color:     var(--color-gray-200);
  --border-strong:    var(--color-gray-300);

  --text-primary:     var(--color-gray-900);
  --text-secondary:   var(--color-gray-500);
  --text-muted:       var(--color-gray-400);
  --text-inverse:     var(--color-white);

  --link-color:       var(--color-blue-600);
  --link-hover:       var(--color-blue-700);

  --accent-color:     var(--color-blue-600);
  --accent-light:     var(--color-blue-100);

  /* ── Typography ─────────────────────────────────────────────────────────── */

  --font-serif:  'Georgia', 'Times New Roman', serif;
  --font-sans:   'system-ui', '-apple-system', 'Segoe UI', sans-serif;
  --font-mono:   'ui-monospace', 'Courier New', monospace;

  /* Type scale (px values, used as rem equivalents) */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.8125rem;  /* 13px */
  --text-base:  0.9375rem;  /* 15px */
  --text-md:    1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   2rem;       /* 32px */
  --text-4xl:   3rem;       /* 48px */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ── Spacing scale ───────────────────────────────────────────────────────── */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */

  /* ── Layout ─────────────────────────────────────────────────────────────── */

  --max-width-content:  1200px;
  --max-width-prose:    680px;
  --max-width-form:     480px;

  --masthead-height:    56px;

  /* ── Borders & radius ────────────────────────────────────────────────────── */

  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-pill: 100px;

  --border-width: 1px;

  /* ── Shadows ─────────────────────────────────────────────────────────────── */

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:  0 4px 16px rgba(0,0,0,0.10);

  /* ── Transitions ─────────────────────────────────────────────────────────── */

  --transition-fast:   120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow:   300ms ease;

  /* ── Z-index stack ───────────────────────────────────────────────────────── */

  --z-base:     1;
  --z-dropdown: 100;
  --z-masthead: 200;
  --z-flash:    300;
  --z-modal:    400;
}