/* ============================================================
   Flightdeck design tokens v1 (Radar palette, Hanken type)
   Source of truth: Shared drives/Flightdeck/brand/flightdeck-identity-v1.html
   and BRAND.md at the repo root.

   Structure (three layers, do not skip levels):
   1. Primitives  --fd-color-*   raw brand values, never used in pages directly
   2. Semantics   --fd-*         what pages and components consume
   3. Legacy aliases (--navy etc) so existing pages restyle by swapping
      their inline :root block for a <link> to this file. Remove aliases
      once every page uses --fd-* names.

   Multi-brand note: a white-label front-end overrides layer 1 only.
   ============================================================ */

:root{
  /* ---- 1. primitives ---- */
  --fd-color-tower:    #0C231C;  /* brand ink, dark surfaces, hero */
  --fd-color-pine:     #123F32;  /* primary actions, symbol on light */
  --fd-color-approach: #0E7A55;  /* links, positive */
  --fd-color-phosphor: #2BD97E;  /* LIVE SIGNAL ONLY. Never text. Never on white. */
  --fd-color-mist:     #EFF6F1;  /* soft surfaces, sidebars, table heads */
  --fd-color-line:     #DBE7DF;  /* borders, dividers */
  --fd-color-grey:     #5F6E66;  /* secondary text */
  --fd-color-ink:      #22312B;  /* body text on light */
  --fd-color-paper:    #FCFDFC;  /* page background */
  --fd-color-white:    #FFFFFF;

  /* status (derived, Radar-compatible) */
  --fd-color-negative:      #B4552D;  /* errors, over-pacing, critical */
  --fd-color-negative-soft: #F9ECE6;
  --fd-color-warn:          #B07514;  /* high-priority, caution */
  --fd-color-warn-soft:     #FBF1E0;
  --fd-color-positive:      #0E7A55;
  --fd-color-positive-soft: #E4F8ED;

  /* ---- 2. semantics (consume these in pages) ---- */
  --fd-bg:            var(--fd-color-paper);
  --fd-surface:       var(--fd-color-white);
  --fd-surface-soft:  var(--fd-color-mist);
  --fd-border:        var(--fd-color-line);
  --fd-text:          var(--fd-color-ink);
  --fd-text-strong:   var(--fd-color-tower);
  --fd-text-muted:    var(--fd-color-grey);
  --fd-heading:       var(--fd-color-tower);
  --fd-link:          var(--fd-color-approach);
  --fd-action:        var(--fd-color-pine);
  --fd-action-hover:  #0E3227;
  --fd-action-text:   var(--fd-color-white);
  --fd-focus-ring:    0 0 0 3px rgba(14,122,85,.25);
  --fd-positive:      var(--fd-color-positive);
  --fd-positive-bg:   var(--fd-color-positive-soft);
  --fd-negative:      var(--fd-color-negative);
  --fd-negative-bg:   var(--fd-color-negative-soft);
  --fd-warn:          var(--fd-color-warn);
  --fd-warn-bg:       var(--fd-color-warn-soft);
  --fd-dark-surface:  var(--fd-color-tower);   /* hero bands, login bg, sidebar */
  --fd-on-dark:       #E9F5EE;
  --fd-on-dark-muted: #9DB4A8;
  --fd-live:          var(--fd-color-phosphor); /* dark surfaces only */

  /* type */
  --fd-font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fd-font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fd-h1: 600 26px/1.2 var(--fd-font-sans);     /* page titles; -0.3px tracking */
  --fd-h2: 600 19px/1.3 var(--fd-font-sans);
  --fd-h3: 600 16px/1.4 var(--fd-font-sans);
  --fd-body: 400 15px/1.55 var(--fd-font-sans);
  --fd-small: 400 13px/1.5 var(--fd-font-sans);
  --fd-label: 600 12px/1.3 var(--fd-font-sans);  /* uppercase, +0.6px tracking */
  --fd-data: 500 13.5px/1.4 var(--fd-font-mono); /* numerals in tables and stats */

  /* shape and depth */
  --fd-radius-sm: 7px;
  --fd-radius:    10px;
  --fd-radius-lg: 14px;
  --fd-shadow-card: 0 1px 3px rgba(12,35,28,.06);
  --fd-shadow-pop:  0 12px 36px rgba(12,35,28,.14);

  /* ---- 3. legacy aliases (delete after full migration) ----
     Old pages used the navy/blue placeholder names. Mapping them here
     means replacing a page's inline :root block with this stylesheet
     rebrands it in one step. */
  --navy:    var(--fd-color-tower);
  --navy2:   var(--fd-color-pine);
  --accent:  var(--fd-color-approach);
  --accent2: var(--fd-color-phosphor);  /* review each use: Phosphor rules apply */
  --ink:     var(--fd-color-ink);
  --grey:    var(--fd-color-grey);
  --line:    var(--fd-color-line);
  --soft:    var(--fd-color-mist);
  --crit:    var(--fd-color-negative);
  --ok:      var(--fd-color-positive);
  --high:    var(--fd-color-warn);
  --err:     var(--fd-color-negative);
}

/* ---- dark mode (opt-in per page: <html data-theme="dark">) ----
   Defined now so dark ships as a token flip, not a redesign. */
:root[data-theme="dark"]{
  --fd-bg:            #081712;
  --fd-surface:       #0C231C;
  --fd-surface-soft:  #10291F;
  --fd-border:        rgba(233,245,238,.14);
  --fd-text:          #D9E7DF;
  --fd-text-strong:   #FFFFFF;
  --fd-text-muted:    #9DB4A8;
  --fd-heading:       #FFFFFF;
  --fd-link:          #55C695;
  --fd-action:        #1A5A47;
  --fd-action-hover:  #237257;
  --fd-action-text:   #FFFFFF;
  --fd-positive:      #55C695;
  --fd-positive-bg:   rgba(43,217,126,.12);
  --fd-negative:      #E08A63;
  --fd-negative-bg:   rgba(180,85,45,.18);
  --fd-warn:          #D9A94A;
  --fd-warn-bg:       rgba(176,117,20,.16);
  --fd-shadow-card:   0 1px 3px rgba(0,0,0,.4);
  --fd-shadow-pop:    0 12px 36px rgba(0,0,0,.5);
}

/* ---- base element defaults (safe to include on every page) ---- */
.fd-reset *{box-sizing:border-box;margin:0;padding:0}
body.fd{font:var(--fd-body);font-family:var(--fd-font-sans);color:var(--fd-text);background:var(--fd-bg);-webkit-font-smoothing:antialiased}
.fd a{color:var(--fd-link);text-decoration:none}
.fd a:hover{text-decoration:underline}

/* ---- shared components ---- */
.fd-btn{display:inline-block;background:var(--fd-action);color:var(--fd-action-text);border:0;border-radius:var(--fd-radius-sm);
  padding:10px 16px;font:600 14px/1 var(--fd-font-sans);cursor:pointer;text-decoration:none}
.fd-btn:hover{background:var(--fd-action-hover)}
.fd-btn:disabled{opacity:.6;cursor:default}
.fd-btn-secondary{display:inline-block;background:var(--fd-surface);color:var(--fd-action);border:1px solid var(--fd-border);
  border-radius:var(--fd-radius-sm);padding:9px 15px;font:600 13px/1 var(--fd-font-sans);cursor:pointer;text-decoration:none}
.fd-btn-secondary:hover{border-color:var(--fd-action);}
.fd-input{width:100%;padding:11px 13px;border:1px solid var(--fd-border);border-radius:var(--fd-radius-sm);
  font:400 14.5px/1.4 var(--fd-font-sans);color:var(--fd-text);background:var(--fd-surface);outline:none}
.fd-input:focus{border-color:var(--fd-color-approach);box-shadow:var(--fd-focus-ring)}
.fd-tag{display:inline-block;padding:3px 9px;border-radius:999px;font:600 12px/1.4 var(--fd-font-sans)}
.fd-tag-ok{background:var(--fd-positive-bg);color:var(--fd-positive)}
.fd-tag-err{background:var(--fd-negative-bg);color:var(--fd-negative)}
.fd-tag-warn{background:var(--fd-warn-bg);color:var(--fd-warn)}
.fd-card{background:var(--fd-surface);border:1px solid var(--fd-border);border-radius:var(--fd-radius-lg);box-shadow:var(--fd-shadow-card)}
.fd-data{font:var(--fd-data);font-variant-numeric:tabular-nums}
.fd-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--fd-live)}
/* .fd-live-dot: dark surfaces only, one per view. Phosphor is a signal, not a paint. */