/* ============================================================
   arro.health — Design Tokens
   Single source of truth for color, type, space, motion.
   Import this everywhere; never hard-code a hex value.
   ============================================================ */

:root {
  /* ---- Brand: Teal (primary / signal of trust) ---- */
  --teal-50:  #E6F0F2;
  --teal-100: #C2DBE0;
  --teal-200: #9AC3CB;
  --teal-300: #6FA8B3;
  --teal-400: #45828F;
  --teal-500: #0F4C5C;   /* core brand teal */
  --teal-600: #0C3E4B;
  --teal-700: #093039;
  --teal-800: #06222A;
  --teal-900: #03141A;

  /* ---- Brand: Aqua (accent / the "signal" highlight) ---- */
  --aqua-50:  #E5F8F6;
  --aqua-100: #B9EDE7;
  --aqua-200: #88E1D7;
  --aqua-300: #54D3C6;
  --aqua-400: #2EC5B6;
  --aqua-500: #18B6A8;   /* core accent */
  --aqua-600: #109488;
  --aqua-700: #0C7268;
  --aqua-800: #08504A;
  --aqua-900: #04302C;

  /* ---- Ink (deep neutral / canvas for dark surfaces) ---- */
  --ink-900: #06182B;
  --ink-800: #0A2540;   /* core ink */
  --ink-700: #123251;
  --ink-600: #1D4264;

  /* ---- Neutrals ---- */
  --white:    #FFFFFF;
  --paper:    #F7FAFC;   /* default light background */
  --mist:     #EDF2F5;
  --gray-200: #DCE3E8;
  --gray-300: #C2CCD3;
  --gray-400: #93A1AB;
  --gray-500: #6B7B86;
  --gray-600: #4C5A64;
  --gray-700: #33424C;

  /* ---- Functional ---- */
  --verified:  #18B6A8;  /* pass / verified — uses brand aqua deliberately */
  --pending:   #E2A33B;  /* in progress */
  --flag:      #E2574C;  /* expired / failed / attention */
  --info:      #2E8FCF;

  /* ---- Semantic (light theme defaults) ---- */
  --bg:            var(--paper);
  --bg-elevated:   var(--white);
  --bg-inverse:    var(--ink-800);
  --text:          var(--ink-800);
  --text-muted:    var(--gray-500);
  --text-inverse:  var(--paper);
  --border:        var(--gray-200);
  --brand:         var(--teal-500);
  --brand-strong:  var(--teal-600);
  --accent:        var(--aqua-500);

  /* ---- Typography ---- */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Type scale (1.250 major-third, 16px base) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.563rem;
  --text-2xl:  1.953rem;
  --text-3xl:  2.441rem;
  --text-4xl:  3.052rem;
  --text-5xl:  3.815rem;
  --text-6xl:  4.768rem;

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-body:  1.6;
  --tracking-tight: -0.03em;
  --tracking-wide:  0.08em;

  /* ---- Space (8pt grid) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06), 0 1px 3px rgba(10, 37, 64, 0.08);
  --shadow-md: 0 4px 12px rgba(10, 37, 64, 0.08), 0 2px 4px rgba(10, 37, 64, 0.06);
  --shadow-lg: 0 18px 40px rgba(6, 24, 43, 0.16);
  --shadow-glow: 0 0 0 1px rgba(24,182,168,0.35), 0 8px 30px rgba(24,182,168,0.25);

  /* ---- Motion (fast + precise) ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-mid: 260ms;
  --dur-slow: 480ms;

  /* ---- Signature gradient ---- */
  --grad-signal: linear-gradient(120deg, var(--teal-500) 0%, #12879A 55%, var(--aqua-500) 100%);
}

/* Dark / inverse surfaces (the brand's "instrument" mode) */
[data-theme="dark"] {
  --bg:           var(--ink-900);
  --bg-elevated:  var(--ink-800);
  --bg-inverse:   var(--paper);
  --text:         var(--paper);
  --text-muted:   var(--gray-400);
  --text-inverse: var(--ink-800);
  --border:       rgba(255,255,255,0.10);
  --brand:        var(--aqua-500);
  --brand-strong: var(--aqua-400);
  --accent:       var(--aqua-500);
}