/* Hallmark · tokens · genre: modern-minimal · theme: Cobalt
 * Cool engineered near-white paper · one electric cobalt signal · hairlines · one graphite dark band
 * axes: paper-band=light(cool) · display-style=grotesk-sans · accent-hue=cool(electric cobalt)
 */
:root {
  /* ---- Colour: cool paper + cool charcoal ink ---- */
  --color-paper:        oklch(98.5% 0.004 250);
  --color-paper-2:      oklch(96.4% 0.005 252);   /* subtle raised surface */
  --color-ink:          oklch(24% 0.02 258);      /* display / headings */
  --color-ink-2:        oklch(34% 0.018 257);     /* body */
  --color-ink-3:        oklch(52% 0.015 257);     /* muted / meta */

  /* ===== Brand accent - RE-THEME BY SWAPPING THIS ONE LINE =====
   * Everything below derives from --brand via CSS relative-color syntax,
   * so a single hex change re-colours the whole site (fills, hovers,
   * contrast-safe text, auto black/white button text, tints).        */
  --brand:              #2f6bff;                                                 /* cobalt blue (swap this to re-theme) */

  --color-accent:       var(--brand);                                            /* solid fills + bright pop on the dark band */
  --color-accent-press: oklch(from var(--brand) calc(l - 0.08) c h);            /* darker fill for hover / active */
  --color-accent-text:  oklch(from var(--brand) min(l, 0.50) calc(c + 0.03) h); /* contrast-safe text / icon on light paper */
  --color-accent-ink:   oklch(from var(--brand) clamp(0, (0.62 - l) * 1000, 1) 0 0); /* auto black/white text ON the fill */
  --color-accent-soft:  oklch(from var(--brand) l c h / 0.14);                   /* translucent tint background */

  /* ---- Product-semantic chips (bug vs feature) - restrained, tag-only ---- */
  --color-bug:          oklch(57% 0.16 25);
  --color-bug-soft:     oklch(57% 0.16 25 / 0.10);

  /* ---- The single dark graphite band ---- */
  --color-graphite:     oklch(22% 0.016 260);     /* cards on dark */
  --color-graphite-2:   oklch(19.5% 0.016 260);   /* the band itself */
  --color-graphite-3:   oklch(25% 0.016 260);     /* mini-UI surface on dark */
  --color-graphite-rule:oklch(32% 0.016 260);
  --color-on-graphite:  oklch(91% 0.01 258);
  --color-on-graphite-2:oklch(68% 0.012 258);

  /* ---- Hairlines do the structural work ---- */
  --color-rule:         oklch(91% 0.006 255);
  --color-rule-2:       oklch(85% 0.008 255);
  --color-focus:        var(--color-accent-text);

  /* ---- Derived surfaces / depth (alpha) ---- */
  --color-paper-blur:   oklch(98.5% 0.004 250 / 0.82);  /* sticky nav backdrop */
  --color-scrim:        oklch(24% 0.02 258 / 0.4);       /* ⌘K palette scrim */
  --shadow-card:        0 1px 2px oklch(24% 0.02 258 / 0.05);
  --shadow-pop:         0 24px 60px oklch(24% 0.02 258 / 0.2);
  --shadow-sheet:       0 -8px 30px oklch(24% 0.02 258 / 0.12);  /* bottom-sheet lift */

  /* ---- Type ---- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --text-display-s: clamp(2.4rem, 1.6rem + 3.4vw, 3.6rem);
  --text-display:   clamp(2.9rem, 1.9rem + 4.6vw, 4.6rem);

  /* ---- 4pt spacing scale ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-mid:  300ms;
  --dur-slow: 600ms;

  /* ---- Geometry: drawn with a ruler ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --rule: 1px;
}