/* ============================================================
   CARE-PAC — Design Tokens (CSS Custom Properties)
   ------------------------------------------------------------
   Mirror of docs/design-system/tokens.css (canonical).
   Keep this in sync when the canonical file changes.
   Components must reference SEMANTIC tokens
   (--color-text-primary, --color-surface) and never reach
   into the brand scale.
   ============================================================ */

:root {
  /* ─── Brand anchors (sampled from logo, do not edit) ───────── */
  --color-brand-navy:  #062B3D;
  --color-brand-blue:  #0C77BB;
  --color-brand-sky:   #27AAE0;

  /* ─── Navy scale ───────────────────────────────────────────── */
  --color-navy-50:  #EDF7FD;
  --color-navy-100: #E0E9EF;
  --color-navy-200: #C0D5E1;
  --color-navy-300: #91B7CE;
  --color-navy-400: #7095AB;
  --color-navy-500: #507489;
  --color-navy-600: #34576B;
  --color-navy-700: #1F4155;
  --color-navy-800: #062B3D;
  --color-navy-900: #001420;

  /* ─── Blue scale ───────────────────────────────────────────── */
  --color-blue-50:  #E3F8FF;
  --color-blue-100: #D6EBFE;
  --color-blue-200: #A9D7FF;
  --color-blue-300: #5FB9FF;
  --color-blue-400: #3996DC;
  --color-blue-500: #0374B8;
  --color-blue-600: #0C77BB;
  --color-blue-700: #003F78;
  --color-blue-800: #002853;
  --color-blue-900: #001231;

  /* ─── Sky scale (decorative + on-dark text) ────────────────── */
  --color-sky-50:  #E0FAFF;
  --color-sky-100: #D3ECFA;
  --color-sky-200: #A1DAF9;
  --color-sky-300: #44BFF6;
  --color-sky-400: #27AAE0;
  --color-sky-500: #007AAD;
  --color-sky-600: #005B86;
  --color-sky-700: #004467;
  --color-sky-800: #002B46;
  --color-sky-900: #001527;

  /* ─── Warm neutral ─────────────────────────────────────────── */
  --color-neutral-50:  #F7F5F1;
  --color-neutral-100: #EAE7E3;
  --color-neutral-200: #D3D1CD;
  --color-neutral-300: #B5B0A9;
  --color-neutral-400: #938E87;
  --color-neutral-500: #726E67;
  --color-neutral-600: #56524B;
  --color-neutral-700: #403D36;
  --color-neutral-800: #282623;
  --color-neutral-900: #13110F;

  /* ─── Semantic state colours ───────────────────────────────── */
  --color-success-50:  #E8FAF0;
  --color-success-100: #DBEDE3;
  --color-success-500: #31805D;
  --color-success-600: #066242;
  --color-success-700: #004C2D;

  --color-warning-50:  #FFF2DF;
  --color-warning-100: #F7E4D2;
  --color-warning-500: #9F5D00;
  --color-warning-600: #7C4200;
  --color-warning-700: #5E2F00;

  --color-danger-50:   #FFECE9;
  --color-danger-100:  #FFDEDB;
  --color-danger-500:  #B8403F;
  --color-danger-600:  #961D23;
  --color-danger-700:  #7B000B;

  /* ── SEMANTIC — light mode (default) ───────────────────────── */
  --color-surface:          #FFFFFF;
  --color-surface-raised:   var(--color-neutral-50);
  --color-surface-sunken:   var(--color-neutral-100);
  --color-surface-inverse:  var(--color-navy-800);

  --color-text-primary:     var(--color-navy-800);
  --color-text-secondary:   var(--color-neutral-700);
  --color-text-tertiary:    var(--color-neutral-600);
  --color-text-on-brand:    #FFFFFF;
  --color-text-on-dark:     #FFFFFF;
  --color-text-link:        var(--color-blue-700);
  --color-text-link-hover:  var(--color-blue-800);

  --color-border-subtle:    var(--color-neutral-200);
  --color-border-default:   var(--color-neutral-300);
  --color-border-strong:    var(--color-neutral-700);
  --color-border-focus:     var(--color-sky-400);

  --color-brand-surface:           var(--color-blue-600);
  --color-brand-surface-hover:     var(--color-blue-700);
  --color-brand-surface-active:    var(--color-blue-800);
  --color-brand-surface-subtle:    var(--color-blue-50);

  --color-focus-ring:       var(--color-sky-400);
  --focus-ring-width:       2px;
  --focus-ring-offset:      2px;

  --color-success-surface:  var(--color-success-50);
  --color-success-text:     var(--color-success-700);
  --color-warning-surface:  var(--color-warning-50);
  --color-warning-text:     var(--color-warning-700);
  --color-danger-surface:   var(--color-danger-50);
  --color-danger-text:      var(--color-danger-700);
  --color-info-surface:     var(--color-blue-50);
  --color-info-text:        var(--color-blue-700);

  /* ─── Spacing (4px base) ───────────────────────────────────── */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ─── Type scale (fluid) ───────────────────────────────────── */
  --text-xs:        clamp(0.75rem,  0.72rem + 0.15vw,  0.8125rem);
  --text-sm:        clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --text-base:      clamp(1rem,     0.96rem + 0.20vw, 1.0625rem);
  --text-body-lg:   clamp(1.125rem, 1.08rem + 0.23vw, 1.1875rem);
  --text-lg:        clamp(1.25rem,  1.17rem + 0.40vw, 1.375rem);
  --text-xl:        clamp(1.5rem,   1.40rem + 0.50vw, 1.625rem);
  --text-2xl:       clamp(1.875rem, 1.70rem + 0.88vw, 2.25rem);
  --text-3xl:       clamp(2.25rem,  2.00rem + 1.25vw, 3rem);
  --text-display:   clamp(3rem,     2.50rem + 2.50vw, 4.5rem);

  --leading-tight:    1.2;
  --leading-snug:     1.35;
  --leading-normal:   1.5;
  --leading-relaxed:  1.6;
  --leading-loose:    1.75;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-widest:  0.08em;

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  --font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─── Radius ───────────────────────────────────────────────── */
  --radius-none:  0;
  --radius-sm:    0.25rem;
  --radius-md:    0.5rem;
  --radius-lg:    0.75rem;
  --radius-xl:    1rem;
  --radius-2xl:   1.5rem;
  --radius-full:  9999px;

  /* ─── Shadows ──────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px 0   rgba(6, 43, 61, 0.04);
  --shadow-sm:  0 1px 3px 0   rgba(6, 43, 61, 0.06), 0 1px 2px -1px rgba(6, 43, 61, 0.04);
  --shadow-md:  0 4px 6px -1px rgba(6, 43, 61, 0.08), 0 2px 4px -2px rgba(6, 43, 61, 0.05);
  --shadow-lg:  0 10px 15px -3px rgba(6, 43, 61, 0.10), 0 4px 6px -4px rgba(6, 43, 61, 0.05);
  --shadow-xl:  0 20px 25px -5px rgba(6, 43, 61, 0.12), 0 8px 10px -6px rgba(6, 43, 61, 0.04);

  /* ─── Motion ───────────────────────────────────────────────── */
  --duration-instant:  0ms;
  --duration-fast:     120ms;
  --duration-normal:   200ms;
  --duration-slow:     300ms;
  --duration-slower:   500ms;

  --easing-standard:   cubic-bezier(0.2, 0, 0, 1);
  --easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0, 1);

  /* ─── Z-index ──────────────────────────────────────────────── */
  --z-hide:        -1;
  --z-base:         0;
  --z-docked:       10;
  --z-dropdown:     1000;
  --z-sticky:       1100;
  --z-overlay:      1300;
  --z-modal:        1400;
  --z-popover:      1500;
  --z-tooltip:      1700;
  --z-toast:        1800;

  /* ─── Layout ───────────────────────────────────────────────── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-max:  1280px;

  --touch-target-min: 48px;
}

/* ── SEMANTIC — dark mode (OS-driven, only when not forced light) ── */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --color-surface:          var(--color-navy-800);
    --color-surface-raised:   var(--color-navy-700);
    --color-surface-sunken:   var(--color-navy-900);
    --color-surface-inverse:  #FFFFFF;

    --color-text-primary:     #FFFFFF;
    --color-text-secondary:   var(--color-navy-200);
    --color-text-tertiary:    var(--color-navy-300);
    --color-text-on-brand:    #FFFFFF;
    --color-text-on-dark:     #FFFFFF;
    --color-text-link:        var(--color-sky-300);
    --color-text-link-hover:  var(--color-sky-200);

    --color-border-subtle:    var(--color-navy-700);
    --color-border-default:   var(--color-navy-600);
    --color-border-strong:    var(--color-navy-300);
    --color-border-focus:     var(--color-sky-300);

    --color-brand-surface:        var(--color-blue-500);
    --color-brand-surface-hover:  var(--color-blue-400);
    --color-brand-surface-active: var(--color-blue-300);
    --color-brand-surface-subtle: var(--color-navy-700);

    --color-focus-ring:       var(--color-sky-300);

    --color-success-surface:  rgba(6, 98, 66, 0.20);
    --color-success-text:     #7BD7A8;
    --color-warning-surface:  rgba(124, 66, 0, 0.25);
    --color-warning-text:     #F1C089;
    --color-danger-surface:   rgba(150, 29, 35, 0.22);
    --color-danger-text:      #FFB5B0;
    --color-info-surface:     rgba(12, 119, 187, 0.22);
    --color-info-text:        var(--color-sky-200);
  }
}

/* ── SEMANTIC — dark mode (explicit class override) ── */
.dark {
  --color-surface:          var(--color-navy-800);
  --color-surface-raised:   var(--color-navy-700);
  --color-surface-sunken:   var(--color-navy-900);
  --color-surface-inverse:  #FFFFFF;

  --color-text-primary:     #FFFFFF;
  --color-text-secondary:   var(--color-navy-200);
  --color-text-tertiary:    var(--color-navy-300);
  --color-text-on-brand:    #FFFFFF;
  --color-text-on-dark:     #FFFFFF;
  --color-text-link:        var(--color-sky-300);
  --color-text-link-hover:  var(--color-sky-200);

  --color-border-subtle:    var(--color-navy-700);
  --color-border-default:   var(--color-navy-600);
  --color-border-strong:    var(--color-navy-300);
  --color-border-focus:     var(--color-sky-300);

  --color-brand-surface:        var(--color-blue-500);
  --color-brand-surface-hover:  var(--color-blue-400);
  --color-brand-surface-active: var(--color-blue-300);
  --color-brand-surface-subtle: var(--color-navy-700);

  --color-focus-ring:       var(--color-sky-300);

  --color-success-surface:  rgba(6, 98, 66, 0.20);
  --color-success-text:     #7BD7A8;
  --color-warning-surface:  rgba(124, 66, 0, 0.25);
  --color-warning-text:     #F1C089;
  --color-danger-surface:   rgba(150, 29, 35, 0.22);
  --color-danger-text:      #FFB5B0;
  --color-info-surface:     rgba(12, 119, 187, 0.22);
  --color-info-text:        var(--color-sky-200);
}

/* ── Accessibility helpers ── */
*:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}