/* ============================================================
   CORBINSOFT DESIGN TOKENS
   The single source for colour, type, spacing, radius, elevation
   and motion. Every other stylesheet refers to these variables;
   change a value here and it updates site-wide.

   Tints of a colour are generated, not typed:
     color-mix(in srgb, var(--clr-blue) 8%, transparent)
   = the brand blue at 8% opacity.

   The living style guide at /styleguide shows every token.
   ============================================================ */
:root {
  /* ── Colour: brand (from the logo) ─────────────────────── */
  --clr-blue:       #1d9fd5;
  --clr-blue-dark:  #0f7aaa;
  --clr-blue-mid:   #2bafd8;
  --clr-slate:      #4a6e8a;   /* logo "Corbinsoft" text */
  --clr-teal:       #00a898;   /* slightly darkened for legibility on white */
  --clr-teal-light: #00c4b4;
  --clr-teal-dark:  #007d74;

  /* ── Colour: surfaces ──────────────────────────────────── */
  --clr-bg:         #ffffff;
  --clr-bg2:        #f4f8fd;
  --clr-bg3:        #eaf2f9;
  --clr-surface:    #ffffff;
  --clr-surface2:   #f0f6fb;
  --clr-white:      #ffffff;
  --clr-navy:       #0d1c30;   /* footer and dark bands */
  --clr-navy-ink:   #adc4d6;   /* text on navy */

  /* ── Colour: text (WCAG AA on --clr-bg and --clr-bg2) ──── */
  --clr-text:       #111e2d;   /* deep navy, never neutral grey */
  --clr-text-mid:   #2d4459;
  --clr-text-muted: #526a7e;
  --clr-text-dim:   #5d7487;   /* 4.9:1 on white */

  /* ── Colour: feedback ──────────────────────────────────── */
  --clr-danger:        #ef4444;
  --clr-danger-strong: #dc2626;
  --clr-danger-deep:   #b91c1c;
  --clr-warning:       #f59e0b;
  --clr-warning-strong:#d97706;
  --clr-success:       #047857;
  --clr-success-deep:  #065f46;

  /* ── Colour: shadow ink ────────────────────────────────── */
  --clr-shadow:     #0f3250;

  /* ── Colour: borders ───────────────────────────────────── */
  --clr-border:     color-mix(in srgb, var(--clr-blue) 12%, transparent);
  --clr-border-mid: color-mix(in srgb, var(--clr-blue) 22%, transparent);
  --clr-border-hi:  color-mix(in srgb, var(--clr-blue) 55%, transparent);

  /* ── Gradients: the brand signature ────────────────────── */
  --gradient:         linear-gradient(135deg, var(--clr-blue) 0%, var(--clr-teal-light) 100%);
  --gradient-text:    linear-gradient(120deg, var(--clr-blue-dark) 0%, var(--clr-blue) 50%, var(--clr-teal) 100%);
  --gradient-pale:    linear-gradient(135deg, color-mix(in srgb, var(--clr-blue) 6%, transparent) 0%, color-mix(in srgb, var(--clr-teal-light) 4%, transparent) 100%);
  --gradient-hero:    radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--clr-blue) 7%, transparent) 0%, transparent 70%);
  --accent-underline: linear-gradient(90deg, var(--clr-blue) 0%, var(--clr-teal-light) 100%);

  /* ── Elevation ─────────────────────────────────────────── */
  --shadow-xs:    0 1px 3px color-mix(in srgb, var(--clr-shadow) 6%, transparent);
  --shadow-card:  0 1px 3px color-mix(in srgb, var(--clr-shadow) 4%, transparent), 0 6px 24px color-mix(in srgb, var(--clr-shadow) 7%, transparent);
  --shadow-hover: 0 4px 8px color-mix(in srgb, var(--clr-shadow) 6%, transparent), 0 12px 40px color-mix(in srgb, var(--clr-blue) 14%, transparent);
  --shadow-float: 0 8px 24px color-mix(in srgb, var(--clr-shadow) 12%, transparent), 0 2px 6px color-mix(in srgb, var(--clr-shadow) 8%, transparent);

  /* ── Type: families ────────────────────────────────────── */
  --font-display: 'Fraunces', serif;
  --font-body:    'Manrope', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Type: scale ───────────────────────────────────────────
     Text steps 10–20, display steps 24–56. Fluid headings use
     clamp() between two of these steps. */
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;

  /* "Spec" type: the one code-font style for labels, dates, captions and
     step numbers. Technical tokens (standards codes, config names, code)
     keep their own mono styling; interface text uses --font-body. */
  --spec-size:     var(--fs-11);
  --spec-weight:   600;
  --spec-tracking: 0.12em;

  /* ── Spacing (4-pt) ────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ── Radius ────────────────────────────────────────────────
     Inputs and tags xs/sm · cards md · panels lg · hero frames xl.
     Nested surfaces: inner radius = outer radius − padding. */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ── Motion ────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;   /* hover, press, small state changes */
  --dur:         250ms;   /* menus, toggles, panels */
  --dur-slow:    400ms;   /* section reveals, page fades */
}