/* Optima Analytics — design tokens.
   Exported verbatim from the Optima Analytics Design System
   (claude.ai/design project 5c1b8698). Edit there, then re-export. */

/* ============================================================
   Optima Analytics — Color tokens
   Derived from brand logo + PPT template:
     Navy   #002060   Red   #C00000   Cyan  #00B0F0
   ============================================================ */

:root {
  /* ---- Brand core (raw) ---- */
  --oa-navy:        #002060;  /* primary ink / deep brand */
  --oa-navy-700:    #062a72;
  --oa-navy-600:    #123a8c;
  --oa-cyan:        #00B0F0;  /* bright interactive accent */
  --oa-cyan-600:    #009fd8;
  --oa-cyan-400:    #38c4f5;
  --oa-red:         #C00000;  /* alert / warm accent */
  --oa-red-600:     #a50000;
  --oa-red-400:     #e11b1b;

  /* ---- Navy scale (backgrounds → text) ---- */
  --navy-950: #00133c;
  --navy-900: #002060;
  --navy-800: #072a70;
  --navy-700: #123a8c;
  --navy-600: #1f4ea8;

  /* ---- Cyan scale ---- */
  --cyan-700: #0083b5;
  --cyan-600: #009fd8;
  --cyan-500: #00B0F0;
  --cyan-400: #38c4f5;
  --cyan-200: #a5e4fb;
  --cyan-100: #d6f3fe;
  --cyan-50:  #ecfaff;

  /* ---- Red scale ---- */
  --red-700: #8f0000;
  --red-600: #a50000;
  --red-500: #C00000;
  --red-400: #e11b1b;
  --red-200: #f4b0b0;
  --red-50:  #fdecec;

  /* ---- Neutral / grey scale (cool-tinted, professional) ---- */
  --grey-950: #0c1220;
  --grey-900: #131a2b;
  --grey-800: #263145;
  --grey-700: #3b475e;
  --grey-600: #566179;
  --grey-500: #737f96;
  --grey-400: #97a1b4;
  --grey-300: #c2cad6;
  --grey-200: #dde2ea;
  --grey-150: #e7ebf1;
  --grey-100: #f0f3f7;
  --grey-50:  #f7f9fc;
  --white:    #ffffff;

  /* ---- Semantic status ---- */
  --success: #2f9e6f;
  --success-bg: #e7f6ef;
  --warning: #d98a17;
  --warning-bg: #fbf1e0;
  --danger:  var(--red-500);
  --danger-bg: var(--red-50);
  --info:    var(--cyan-500);
  --info-bg: var(--cyan-50);

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Brand */
  --brand-primary:      var(--oa-navy);
  --brand-accent:       var(--oa-cyan);
  --brand-warm:         var(--oa-red);

  /* Text */
  --text-strong:  var(--oa-navy);      /* headings on light */
  --text-body:    var(--grey-800);     /* body copy */
  --text-muted:   var(--grey-600);     /* secondary / captions */
  --text-subtle:  var(--grey-500);     /* meta, disabled labels */
  --text-on-dark: var(--white);
  --text-on-dark-muted: rgba(255,255,255,0.72);
  --text-link:    var(--cyan-700);

  /* Surfaces */
  --surface-page:    var(--grey-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--grey-100);
  --surface-dark:    var(--oa-navy);   /* dark brand sections */
  --surface-dark-2:  var(--navy-950);

  /* Borders */
  --border-subtle:  var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong:  var(--grey-400);
  --border-focus:   var(--oa-cyan);

  /* Interactive */
  --action-bg:        var(--oa-cyan);
  --action-bg-hover:  var(--cyan-600);
  --action-bg-active: var(--cyan-700);
  --action-fg:        var(--oa-navy);
  --action-ring:      rgba(0,176,240,0.35);

  --action-navy-bg:        var(--oa-navy);
  --action-navy-bg-hover:  var(--navy-700);
  --action-navy-bg-active: var(--navy-950);
}
/* ============================================================
   Optima Analytics — Typography tokens
     Display / headings : Jost   (geometric, modern, high-tech)
     Body / UI          : Mulish (humanist, warm, legible)
     Data / code accent : IBM Plex Mono
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Jost', 'Tw Cen MT', 'Century Gothic', system-ui, sans-serif;
  --font-body:    'Mulish', 'Gill Sans MT', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Weights ---- */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* ---- Type scale (rem, 16px base) ---- */
  --fs-display-xl: 4.5rem;   /* 72 — hero */
  --fs-display-l:  3.5rem;   /* 56 */
  --fs-display-m:  2.75rem;  /* 44 */
  --fs-h1:         2.25rem;  /* 36 */
  --fs-h2:         1.75rem;  /* 28 */
  --fs-h3:         1.375rem; /* 22 */
  --fs-h4:         1.125rem; /* 18 */
  --fs-body-lg:    1.125rem; /* 18 */
  --fs-body:       1rem;     /* 16 */
  --fs-body-sm:    0.875rem; /* 14 */
  --fs-caption:    0.75rem;  /* 12 */
  --fs-overline:   0.6875rem;/* 11 */

  /* ---- Line heights ---- */
  --lh-tight:   1.05; /* @kind other */
  --lh-heading: 1.15; /* @kind other */
  --lh-snug:    1.35; /* @kind other */
  --lh-body:    1.6; /* @kind other */
  --lh-relaxed: 1.75; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-tight:    -0.02em; /* @kind other */
  --ls-normal:   0; /* @kind other */
  --ls-wide:     0.04em; /* @kind other */
  --ls-overline: 0.16em; /* @kind other */
}
/* ============================================================
   Optima Analytics — Spacing, radius, shadow, motion, layout
   4px base grid.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radius ---- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;   /* default cards / inputs */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --bw-hairline: 1px;
  --bw-thick:    2px;
  --bw-accent:   3px;

  /* ---- Elevation / shadows (soft, cool-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(0,32,96,0.06);
  --shadow-sm: 0 1px 3px rgba(0,32,96,0.08), 0 1px 2px rgba(0,32,96,0.04);
  --shadow-md: 0 4px 12px rgba(0,32,96,0.10), 0 2px 4px rgba(0,32,96,0.05);
  --shadow-lg: 0 12px 32px rgba(0,32,96,0.14), 0 4px 8px rgba(0,32,96,0.06);
  --shadow-xl: 0 24px 60px rgba(0,32,96,0.20);
  --shadow-cyan: 0 8px 28px rgba(0,176,240,0.28);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px var(--action-ring);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-wide: 1360px;
  --gutter: var(--space-6);
}