/* ============================================================
   NOTAM VIEWER / EFB — DESIGN TOKENS
   Matches the Cathay Pacific Electronic Flight Bag (EFB) visual language:
   near-black background, lime green primary, teal data accent,
   amber status, condensed monospace data fields.
   ============================================================ */

/* ── BASE COLOR TOKENS ────────────────────────────── */
:root {
  /* ── BACKGROUNDS ───────────────────────────────── */
  --color-bg:               #0e0e0e;   /* EFB page / app shell — near-black */
  --color-surface:          #161616;   /* section panels, sidebar */
  --color-surface-mid:      #1e1e1e;   /* card interiors, table rows */
  --color-surface-raised:   #252525;   /* elevated cards, modals */
  --color-surface-deep:     #0a0a0a;   /* deepest — code blocks, tooltip bg */
  --color-input-bg:         #1a1a1a;   /* input / select backgrounds */
  --color-hover:            #242830;   /* row hover */
  --color-header-bar:       #111111;   /* top nav/header bar */
  --color-tab-bar:          #0d0d0d;   /* bottom tab bar */

  /* ── PRIMARY — lime green ──────────────────────── */
  --color-primary:          #b4ff32;   /* EFB activated pill, key CTAs */
  --color-primary-dim:      #7db800;   /* dimmer green for secondary use */
  --color-primary-dark:     #1a3300;   /* on-primary text, button hover bg */
  --color-primary-bg:       rgba(180,255,50,0.12); /* tinted green bg */

  /* ── TEAL — data accent ────────────────────────── */
  --color-teal:             #00c8b4;   /* EFB "Revised" column, active toggles, highlights */
  --color-teal-dim:         #008f80;
  --color-teal-bg:          rgba(0,200,180,0.15);

  /* ── AMBER — status / CTA ──────────────────────── */
  --color-amber:            #f5c400;   /* "Download backup", "Pending" status */
  --color-amber-dim:        #b38e00;
  --color-amber-bg:         rgba(245,196,0,0.15);
  --color-amber-text:       #1a1400;

  /* ── TEXT ──────────────────────────────────────── */
  --color-text:             #e8e8e8;   /* primary — slightly off-white */
  --color-text-muted:       #909090;   /* secondary labels */
  --color-text-secondary:   #5a5a5a;   /* tertiary / disabled hints */
  --color-text-tertiary:    #404040;   /* ghost/placeholder */
  --color-text-accent:      --color-primary; /* accent text */

  /* ── BORDERS ───────────────────────────────────── */
  --color-border:           rgba(255,255,255,0.10); /* standard hairline */
  --color-border-strong:    rgba(255,255,255,0.18); /* emphasized dividers */
  --color-border-light:     rgba(255,255,255,0.06); /* subtle separators */

  /* ── SHADOWS ───────────────────────────────────── */
  --shadow-sm:              rgba(0,0,0,0.35);
  --shadow-md:              rgba(0,0,0,0.50);
  --shadow-lg:              rgba(0,0,0,0.70);
  --shadow-modal:           rgba(0,0,0,0.85);

  /* ── STATE ─────────────────────────────────────── */
  --color-disabled:         #3a3a3a;
  --color-loading:          #444444;

  /* ── STATUS SEMANTIC ───────────────────────────── */
  /* Active now */
  --color-active:           #ff4f4f;   /* EFB: red active indicator */
  --color-active-bg:        rgba(255,79,79,0.18);
  --color-active-text:      #ff4f4f;

  /* Next 3 hours */
  --color-next3hr:          #f5c400;
  --color-next3hr-bg:       rgba(245,196,0,0.18);
  --color-next3hr-text:     #f5c400;

  /* Error */
  --color-error:            #c0392b;
  --color-error-bg:         rgba(192,57,43,0.15);

  /* Map markers — kept from original (proven aviation standard) */
  --color-marker-active:    #ff4f4f;
  --color-marker-next3hr:   #f5c400;
  --color-marker-inactive:  #2ca7ee;

  /* ── ALTITUDE BADGES ───────────────────────────── */
  --color-agl-bg:           #ffda75;
  --color-agl-text:         #4d3c0e;
  --color-amsl-bg:          #d2e3ff;
  --color-amsl-text:        #2c3744;

  /* Location highlight */
  --color-highlight-bg:     rgba(255,255,255,0.12);
  --color-highlight-text:   #ffffff;

  /* Map OL controls */
  --color-ol-control:       #1a2a3a;
  --color-ol-control-hover: #223344;

  /* ── SPACING ───────────────────────────────────── */
  --space-xs:    2px;
  --space-sm:    4px;
  --space-md:    8px;
  --space-lg:    10px;
  --space-xl:    12px;
  --space-xxl:   16px;
  --space-xxxl:  20px;
  --space-large: 28px;

  /* ── BORDER RADIUS ────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;   /* EFB uses tighter radii than NOTAM viewer */
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-xxl:  20px;  /* pill shape */
  --radius-full: 50%;

  /* ── TYPOGRAPHY ────────────────────────────────── */
  /* EFB uses a condensed, clean sans — closest Google match is IBM Plex Sans Condensed */
  --font-family-ui:    'IBM Plex Sans', 'SF Pro Display', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono:  'IBM Plex Mono', 'SF Mono', 'Fira Mono', 'Consolas', monospace;
  --font-family-data:  'IBM Plex Mono', 'SF Mono', monospace;

  --font-size-xs:    11px;
  --font-size-sm:    12px;
  --font-size-md:    13px;
  --font-size-base:  14px;
  --font-size-lg:    18px;
  --font-size-xl:    24px;
  --font-size-xxl:   36px;
  --font-size-title: 16px;

  --font-weight-normal: 400;
  --font-weight-semi:   500;
  --font-weight-bold:   600;

  --line-height-base:  1.5;
  --line-height-tight: 1.2;
  --line-height-loose: 1.4;

  /* ── Z-INDEX ───────────────────────────────────── */
  --z-overlay:  10;
  --z-tooltip:  1000;
  --z-modal:    1000;

  /* ── BREAKPOINTS ────────────────────────────────── */
  --breakpoint-mobile: 700px;
}

@media (min-width: 701px) {
  :root {
    --font-size-xs:    12px;
    --font-size-sm:    13px;
    --font-size-md:    15px;
    --font-size-base:  16px;
    --font-size-title: 18px;
  }
}

/* ── SEMANTIC / ALIAS VARS ─────────────────────────── */
/* Map base tokens to semantic roles for easier theming */
:root {
  /* Page */
  --bg-page:          var(--color-bg);
  --bg-surface:       var(--color-surface);
  --bg-card:          var(--color-card);
  --bg-input:         var(--color-card);
  --bg-modal:         var(--color-card);
  --bg-tooltip:       var(--color-surface-deep);
  --bg-hover:         var(--color-hover);

  /* Interactive */
  --btn-bg:           var(--color-primary);
  --btn-text:         var(--color-primary-dark);
  --btn-hover-bg:     var(--color-primary-dark);
  --btn-hover-text:   var(--color-primary);

  /* Text hierarchy */
  --fg1:              var(--color-text);          /* primary — all key data */
  --fg2:              var(--color-text-muted);    /* secondary — clock digits, labels */
  --fg3:              var(--color-text-secondary); /* tertiary — dim info */
  --fg4:              var(--color-text-tertiary); /* map tooltip sublabels */

  /* Typography roles */
  --text-label:       var(--font-size-sm);
  --text-body:        var(--font-size-base);
  --text-data:        var(--font-size-base);      /* monospace data fields */
  --text-clock-main:  var(--font-size-xxl);       /* 40px clock */
  --text-clock-sec:   var(--font-size-lg);        /* 20px seconds */
  --text-heading:     var(--font-size-title);     /* section headings */

  /* Status */
  --status-active-bg:    var(--color-active);
  --status-active-text:  var(--color-active-text);
  --status-next3hr-bg:   var(--color-next3hr);
  --status-next3hr-text: var(--color-next3hr-text);
  --status-inactive-bg:  transparent;
  --status-inactive-text:var(--color-text);

  /* Borders */
  --border-color:        var(--color-border);
  --border-subtle:       rgba(255,255,255,0.08);  /* within deep-dark surfaces */
}

/* ── BASE ELEMENT RESETS ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family:      var(--font-family-ui);
  font-size:        var(--font-size-base);
  line-height:      var(--line-height-base);
  color:            var(--fg1);
  background:       var(--bg-page);
  margin:           0;
}

/* Data / NOTAM fields */
.data, .mono, code, kbd, samp,
.notam-period, .notam-content, .notam-height,
.notam-eff, .coordinates {
  font-family: var(--font-family-data);
}

/* Description code blocks (map tooltip) */
.description-code {
  font-family:  var(--font-family-mono);
  color:        var(--color-primary);
  font-size:    var(--font-size-sm);
  line-height:  var(--line-height-loose);
}
.description-code span { color: var(--color-text-description); }