/* ==========================================================================
   WFS-CISS design tokens
   Two layers:
     1. --p-*   palette. Raw scales. Theme independent. NEVER referenced by
                components directly.
     2. --wfs-* semantic. What components actually use. Dark mode is a single
                override block at the bottom of this file.
   ========================================================================== */

:root {
  /* ---- palette: neutral ramp ---------------------------------------- */
  --p-slate-50:  #f6f8fa;
  --p-slate-100: #eef1f5;
  --p-slate-200: #e1e6ed;
  --p-slate-300: #cbd3de;
  --p-slate-400: #9aa5b5;
  --p-slate-500: #6b7686;
  --p-slate-600: #4d5766;
  --p-slate-700: #363f4c;
  --p-slate-800: #232a35;
  --p-slate-900: #171d26;
  --p-slate-950: #0f141b;

  /* ---- palette: intent ---------------------------------------------- */
  --p-blue-300:  #7fb4f5;
  --p-blue-400:  #4c94ef;
  --p-blue-500:  #1f6fd4;
  --p-blue-600:  #1857a8;
  --p-green-300: #7fd6a3;
  --p-green-400: #45bd7c;
  --p-green-500: #1f9d5c;
  --p-green-600: #187a48;
  --p-amber-300: #f7cf7a;
  --p-amber-400: #eeb43c;
  --p-amber-500: #c98a13;
  --p-red-300:   #f3a09b;
  --p-red-400:   #e86b64;
  --p-red-500:   #cf3b33;
  --p-red-600:   #a52c25;
  --p-violet-400:#a78bfa;
  --p-violet-500:#7c5cf0;

  /* ---- semantic: surfaces ------------------------------------------- */
  --wfs-bg:              var(--p-slate-100);
  --wfs-surface:         #ffffff;
  --wfs-surface-raised:  #ffffff;
  --wfs-surface-sunken:  var(--p-slate-50);
  --wfs-surface-hover:   var(--p-slate-50);
  --wfs-border:          var(--p-slate-200);
  --wfs-border-strong:   var(--p-slate-300);
  --wfs-overlay:         rgba(15, 20, 27, .45);

  /* ---- semantic: text ----------------------------------------------- */
  --wfs-text:            var(--p-slate-900);
  --wfs-text-muted:      var(--p-slate-500);
  --wfs-text-faint:      var(--p-slate-400);
  --wfs-text-inverse:    #ffffff;

  /* ---- semantic: intent --------------------------------------------- */
  --wfs-primary:         var(--p-blue-500);
  --wfs-primary-hover:   var(--p-blue-600);
  --wfs-primary-soft:    rgba(31, 111, 212, .10);
  --wfs-primary-fg:      var(--p-blue-600);

  --wfs-success:         var(--p-green-500);
  --wfs-success-soft:    rgba(31, 157, 92, .12);
  --wfs-success-fg:      var(--p-green-600);

  --wfs-warn:            var(--p-amber-400);
  --wfs-warn-soft:       rgba(238, 180, 60, .16);
  --wfs-warn-fg:         var(--p-amber-500);

  --wfs-danger:          var(--p-red-500);
  --wfs-danger-soft:     rgba(207, 59, 51, .12);
  --wfs-danger-fg:       var(--p-red-600);

  --wfs-info:            var(--p-violet-500);
  --wfs-info-soft:       rgba(124, 92, 240, .12);
  --wfs-info-fg:         var(--p-violet-500);

  --wfs-focus:           var(--p-blue-400);

  /* ---- semantic: flight domain -------------------------------------- */
  --wfs-arrival:         var(--p-blue-500);
  --wfs-arrival-soft:    rgba(31, 111, 212, .10);
  --wfs-departure:       var(--p-violet-500);
  --wfs-departure-soft:  rgba(124, 92, 240, .10);
  --wfs-ramp-current:    var(--wfs-success);
  --wfs-ramp-prev:       var(--wfs-text-faint);

  /* ---- spacing: 4px base -------------------------------------------- */
  --wfs-s1: 4px;
  --wfs-s2: 8px;
  --wfs-s3: 12px;
  --wfs-s4: 16px;
  --wfs-s5: 20px;
  --wfs-s6: 24px;
  --wfs-s7: 32px;
  --wfs-s8: 40px;

  /* ---- radii --------------------------------------------------------- */
  --wfs-r-sm:   4px;
  --wfs-r-md:   8px;
  --wfs-r-lg:   12px;
  --wfs-r-pill: 999px;

  /* ---- elevation ------------------------------------------------------ */
  --wfs-e1: 0 1px 2px rgba(23, 29, 38, .06);
  --wfs-e2: 0 2px 8px rgba(23, 29, 38, .08);
  --wfs-e3: 0 8px 24px rgba(23, 29, 38, .10);

  /* ---- typography ----------------------------------------------------- */
  --wfs-font:      Roboto, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --wfs-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --wfs-fs-xs:   .6875rem;  /* 11px - table headers, labels */
  --wfs-fs-sm:   .8125rem;  /* 13px - table body, meta */
  --wfs-fs-md:   .875rem;   /* 14px - base UI */
  --wfs-fs-lg:   1rem;
  --wfs-fs-xl:   1.25rem;
  --wfs-fs-2xl:  1.5rem;

  --wfs-lh-tight:  1.2;
  --wfs-lh-normal: 1.5;
  --wfs-ls-caps:   .08em;

  /* ---- layout --------------------------------------------------------- */
  --wfs-content-max: 1680px;

  /* ---- motion --------------------------------------------------------- */
  --wfs-t-fast: 120ms;
  --wfs-t-med:  220ms;
  --wfs-ease:   cubic-bezier(.2, .7, .3, 1);
}

/* ==========================================================================
   Dark theme. One block. Only semantic tokens are redefined.
   Status colours are LIGHTER and less saturated here - not the same hex as
   light mode - so contrast holds against a dark surface.
   ========================================================================== */

:root[data-theme="dark"] {
  --wfs-bg:              var(--p-slate-950);
  --wfs-surface:         var(--p-slate-900);
  --wfs-surface-raised:  var(--p-slate-800);
  --wfs-surface-sunken:  #131922;
  --wfs-surface-hover:   #1c232e;
  --wfs-border:          #2a323e;
  --wfs-border-strong:   #3a4553;
  --wfs-overlay:         rgba(0, 0, 0, .6);

  --wfs-text:            #e7ecf3;
  --wfs-text-muted:      #98a3b3;
  --wfs-text-faint:      #6c7789;
  --wfs-text-inverse:    var(--p-slate-950);

  --wfs-primary:         var(--p-blue-400);
  --wfs-primary-hover:   var(--p-blue-300);
  --wfs-primary-soft:    rgba(76, 148, 239, .16);
  --wfs-primary-fg:      var(--p-blue-300);

  --wfs-success:         var(--p-green-400);
  --wfs-success-soft:    rgba(69, 189, 124, .16);
  --wfs-success-fg:      var(--p-green-300);

  --wfs-warn:            var(--p-amber-400);
  --wfs-warn-soft:       rgba(238, 180, 60, .18);
  --wfs-warn-fg:         var(--p-amber-300);

  --wfs-danger:          var(--p-red-400);
  --wfs-danger-soft:     rgba(232, 107, 100, .16);
  --wfs-danger-fg:       var(--p-red-300);

  --wfs-info:            var(--p-violet-400);
  --wfs-info-soft:       rgba(167, 139, 250, .16);
  --wfs-info-fg:         var(--p-violet-400);

  --wfs-focus:           var(--p-blue-300);

  --wfs-arrival:         var(--p-blue-400);
  --wfs-arrival-soft:    rgba(76, 148, 239, .14);
  --wfs-departure:       var(--p-violet-400);
  --wfs-departure-soft:  rgba(167, 139, 250, .14);
  --wfs-ramp-current:    var(--wfs-success);
  --wfs-ramp-prev:       var(--wfs-text-faint);

  /* tighter, lighter shadows read better on dark surfaces */
  --wfs-e1: 0 1px 2px rgba(0, 0, 0, .40);
  --wfs-e2: 0 2px 8px rgba(0, 0, 0, .45);
  --wfs-e3: 0 8px 24px rgba(0, 0, 0, .50);
}

/* Suppress transitions for one frame while the theme flips, so the switch
   does not turn into 200ms of independently-animating elements. */
:root.is-theming *,
:root.is-theming *::before,
:root.is-theming *::after {
  transition: none !important;
}