/* Hallmark · tokens for SRS IT Consulting · r6 light primary + dark navy accents
 * theme: custom · vibe: "premium tech advisory · light surface, dark navy accent panels, electric blue + chrome"
 * paper: oklch(97% 0.005 240) LIGHT · paper-dark: oklch(17% 0.025 245) DARK NAVY
 * accent: oklch(58% 0.18 235) electric blue
 * display: Manrope · body: Manrope · outlier: Manrope mono-ish (small weight differences)
 * axes: mixed-mode / geometric-sans / cool (electric-blue ~235)
 * studied: no · context: explicit · revised: 2026-05-28 (r6 — light/dark hybrid, brand-kit PNG logo, Manrope)
 */

:root {
  /* ───── Brand — used in CSS, references logo PNG colours ───── */
  --color-brand-deep:   oklch(28% 0.13 250);    /* deep navy */
  --color-brand-bright: oklch(62% 0.20 235);    /* electric blue (matches the triangle in the logo) */

  /* ───── Light surface (primary body) ───── */
  --color-paper:     oklch(97% 0.005 240);   /* light cool bone */
  --color-paper-2:   oklch(94% 0.008 240);   /* elevated surface · subtle cool tint */
  --color-paper-3:   oklch(99% 0.003 240);   /* highest light (cards on cards) */

  /* ───── Dark surface (accent panels — nav, hero, CTA, footer) ───── */
  --color-paper-dark:    oklch(17% 0.025 245);   /* dark navy panel base */
  --color-paper-dark-2:  oklch(21% 0.025 245);   /* elevated dark */
  --color-paper-dark-3:  oklch(25% 0.025 245);   /* highest dark (featured cards on dark) */

  /* ───── Ink (light surface) ───── */
  --color-ink:       oklch(22% 0.05 245);   /* deep navy text on light surface */
  --color-ink-2:     oklch(40% 0.05 245);   /* secondary text on light */

  /* ───── Ink (dark surface) ───── */
  --color-ink-light:   oklch(96% 0.008 240);   /* chrome silver on dark */
  --color-ink-light-2: oklch(80% 0.012 240);   /* secondary chrome on dark */

  /* ───── Rules ───── */
  --color-rule:        oklch(86% 0.012 240);   /* light surface hairline */
  --color-rule-2:      oklch(91% 0.010 240);   /* soft light hairline */
  --color-rule-dark:   oklch(32% 0.025 245);   /* dark surface hairline */
  --color-rule-dark-2: oklch(26% 0.025 245);   /* soft dark hairline */

  /* ───── Greys ───── */
  --color-muted:      oklch(45% 0.025 240);   /* muted on light · ≥4.5:1 */
  --color-muted-dark: oklch(64% 0.025 240);   /* muted on dark · ≥4.5:1 */

  /* ───── Accent — electric blue ───── */
  --color-accent:        oklch(58% 0.18 235);    /* on light surface */
  --color-accent-bright: oklch(68% 0.20 235);    /* on dark surface */
  --color-accent-2:      oklch(64% 0.18 230);    /* hover step */
  --color-accent-ink:    oklch(98% 0.005 240);   /* text on accent fill */

  --color-focus:     oklch(62% 0.22 235);
  --color-focus-light: oklch(72% 0.22 235);   /* focus on dark surface */

  /* ───── Typography — Manrope only ───── */
  --font-display:    "Manrope", ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  --font-body:       "Manrope", ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;

  /* Scale — slightly looser than r5 for premium feel */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.375rem;
  --text-xl:    1.75rem;
  --text-2xl:   2.25rem;
  --text-3xl:   3rem;
  --text-4xl:   3.75rem;
  --text-display:   clamp(2.75rem, 5.5vw + 1rem, 5.5rem);
  --text-display-s: clamp(2.25rem, 4vw + 0.75rem, 3.5rem);

  --leading-display: 1.05;
  --leading-tight:   1.2;
  --leading-body:    1.6;
  --leading-prose:   1.7;

  --tracking-display:    -0.025em;
  --tracking-wordmark:   -0.02em;
  --tracking-small-caps: 0.08em;
  --tracking-wide-caps:  0.12em;

  /* ───── Space — 4pt scale ───── */
  --space-3xs: 0.125rem;
  --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: 6rem;
  --space-4xl: 9rem;

  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --measure-prose: 62ch;

  --rule-hair: 1px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* ───── Motion ───── */
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  --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);

  /* ───── Z-index ───── */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   200;
  --z-sticky-nav: 300;
  --z-modal:    400;

  --banner-height: 5rem;
}