/* =====================================================
   IDRO DEFENCE SYSTEMS — Design Tokens
   /assets/css/tokens.css  Phase 2 (corrected)
   ===================================================== */

/* Google Fonts — Sora / Inter / IBM Plex Mono
   font-display:swap is set in the URL query parameter. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {

  /* ===================================================
     REQUIRED SYSTEM TOKENS — Phase 2 palette
     These are the canonical names. All components
     and styleguide reference these first.
     =================================================== */

  /* Backgrounds */
  --bg:              #FFFFFF;
  --bg-subtle:       #F5F7FA;
  --bg-muted:        #EEF2F7;
  --surface:         #FFFFFF;

  /* Borders */
  --border:          #E2E8F0;
  --border-strong:   #CBD5E1;

  /* Text */
  --ink:             #0B1F3A;   /* primary / heading / darkest — 17.8:1 on bg */
  --text:            #334155;   /* body text — 10.3:1 on bg */
  --text-muted:      #64748B;   /* secondary / muted — 4.76:1 on bg (AA) */

  /* Brand */
  --brand:           #0B2A6B;   /* main navy — 13.7:1 on bg */
  --accent:          #1D4ED8;   /* interactive blue — 6.75:1 on bg */
  --accent-hover:    #1E40AF;
  --accent-soft:     #DBE7FF;

  /* Status */
  --operational:     #15803D;   /* green — 5.04:1 on bg (AA) */
  --hud:             #0891B2;   /* teal — 3.69:1 on bg (large text AA) */
  --danger:          #B91C1C;   /* red — 6.48:1 on bg (AA) */

  /* Focus */
  --focus-ring:      rgba(29, 78, 216, 0.40);

  /* Shadows */
  --shadow-sm:       0 1px 2px rgba(15, 23, 42, .06);
  --shadow:          0 4px 16px rgba(15, 23, 42, .08);
  --shadow-lg:       0 14px 34px rgba(15, 23, 42, .10);

  /* Radius */
  --radius-card:     14px;
  --radius-ctl:      10px;
  --radius-pill:     999px;

  /* ===================================================
     SUPPLEMENTARY ALIAS TOKENS
     Semantic names that map to required tokens.
     Components may use either name.
     =================================================== */

  /* Background aliases */
  --bg-page:          var(--bg);
  --bg-surface:       var(--bg-subtle);
  --bg-surface-alt:   var(--bg-muted);
  --bg-card:          var(--surface);
  --bg-card-hover:    var(--bg-subtle);
  --bg-nav:           var(--bg);
  --bg-nav-scroll:    rgba(255, 255, 255, 0.96);
  --bg-overlay:       rgba(11, 31, 58, 0.55);
  --bg-navy:          var(--brand);

  /* Text aliases */
  --txt-primary:      var(--ink);
  --txt-secondary:    var(--text);
  --txt-muted-safe:   var(--text-muted);
  --txt-inverse:      #ffffff;
  --txt-link:         var(--accent);
  --txt-link-hover:   var(--accent-hover);

  /* Border aliases */
  --border-subtle:    var(--border);
  --border-default:   var(--border-strong);
  --border-brand:     var(--accent);
  --border-glow:      var(--focus-ring);

  /* Brand/status aliases */
  --brand-navy:       var(--brand);
  --brand-red:        var(--danger);
  --brand-blue:       var(--accent);
  --status-success:   var(--operational);
  --status-error:     var(--danger);
  --status-info:      var(--accent);
  --status-warning:   #B45309;

  /* Shadow aliases */
  --shadow-xs:        var(--shadow-sm);
  --shadow-md:        var(--shadow);
  --glow-sm:          0 0 16px rgba(29, 78, 216, 0.18);
  --glow-md:          0 0 32px rgba(29, 78, 216, 0.22);

  /* Radius aliases */
  --radius-sm:        4px;
  --radius:           var(--radius-ctl);
  --radius-md:        var(--radius-card);
  --radius-lg:        20px;
  --radius-xl:        28px;
  --radius-full:      var(--radius-pill);

  /* ===================================================
     TYPOGRAPHY
     =================================================== */

  --font-head: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  clamp(1.5rem,   2.5vw, 1.875rem);
  --text-4xl:  clamp(1.875rem, 3.5vw, 2.25rem);
  --text-5xl:  clamp(2.25rem,  4.5vw, 3rem);
  --text-6xl:  clamp(2.75rem,  5.5vw, 4rem);
  --text-hero: clamp(3rem,     7vw,   5rem);

  /* Font weights */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* Line heights */
  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-normal:  1.55;
  --lh-loose:   1.75;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.12em;

  /* ===================================================
     SPACING  (4px base)
     =================================================== */

  --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;

  /* Layout */
  --max-w:       1280px;
  --max-w-prose: 72ch;
  --gutter:      clamp(1rem, 4vw, 2rem);

  /* ===================================================
     TRANSITIONS
     =================================================== */

  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.40s cubic-bezier(0.4, 0, 0.2, 1);

  /* ===================================================
     COMPONENT TOKENS — BUTTON
     =================================================== */

  --btn-primary-bg:          var(--brand);
  --btn-primary-bg-hover:    #0A2260;
  --btn-primary-txt:         #ffffff;

  --btn-accent-bg:           var(--accent);
  --btn-accent-bg-hover:     var(--accent-hover);
  --btn-accent-txt:          #ffffff;

  --btn-secondary-bg:        transparent;
  --btn-secondary-bg-hover:  var(--bg-subtle);
  --btn-secondary-txt:       var(--brand);
  --btn-secondary-border:    var(--brand);

  --btn-ghost-bg:            transparent;
  --btn-ghost-bg-hover:      var(--bg-muted);
  --btn-ghost-txt:           var(--ink);

  --btn-danger-bg:           var(--danger);
  --btn-danger-bg-hover:     #A01818;
  --btn-danger-txt:          #ffffff;

  --btn-h-sm:     36px;
  --btn-h-md:     44px;
  --btn-h-lg:     52px;
  --btn-px-sm:    var(--space-4);
  --btn-px-md:    var(--space-6);
  --btn-px-lg:    var(--space-8);
  --btn-radius:   var(--radius-ctl);
  --btn-font:     var(--font-body);
  --btn-fw:       var(--fw-semibold);
  --btn-fs:       var(--text-sm);
  --btn-ls:       var(--ls-wide);

  /* ===================================================
     COMPONENT TOKENS — CARD
     =================================================== */

  --card-bg:           var(--surface);
  --card-bg-hover:     var(--bg-subtle);
  --card-border:       var(--border);
  --card-border-hover: var(--accent);
  --card-radius:       var(--radius-card);
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow);
  --card-padding:      var(--space-6);

  /* ===================================================
     COMPONENT TOKENS — INPUT / FORM
     =================================================== */

  --input-bg:           var(--surface);
  --input-border:       var(--border-strong);
  --input-border-focus: var(--accent);
  --input-border-error: var(--danger);
  --input-txt:          var(--ink);
  --input-placeholder:  var(--text-muted);
  --input-radius:       var(--radius-ctl);
  --input-h:            44px;
  --input-px:           var(--space-4);
  --input-shadow-focus: 0 0 0 3px var(--focus-ring);

  --label-txt:  var(--text);
  --label-fs:   var(--text-sm);
  --label-fw:   var(--fw-medium);

  /* ===================================================
     COMPONENT TOKENS — TAG / PILL / BADGE
     =================================================== */

  --tag-bg:      var(--accent-soft);
  --tag-txt:     var(--brand);
  --tag-border:  var(--accent-soft);
  --tag-radius:  var(--radius-pill);
  --tag-px:      var(--space-3);
  --tag-py:      var(--space-1);
  --tag-fs:      var(--text-xs);
  --tag-fw:      var(--fw-medium);
  --tag-ls:      var(--ls-wide);

  --tag-success-bg:  #DCFCE7;
  --tag-success-txt: var(--operational);
  --tag-warning-bg:  #FEF3C7;
  --tag-warning-txt: #B45309;
  --tag-error-bg:    #FEE2E2;
  --tag-error-txt:   var(--danger);
  --tag-info-bg:     var(--accent-soft);
  --tag-info-txt:    var(--accent);
  --tag-hud-bg:      #CFFAFE;
  --tag-hud-txt:     #0E7490;

  /* ===================================================
     COMPONENT TOKENS — SPEC ROW
     =================================================== */

  --spec-border:    var(--border);
  --spec-label-txt: var(--text-muted);
  --spec-label-fs:  var(--text-sm);
  --spec-value-txt: var(--ink);
  --spec-value-fs:  var(--text-sm);
  --spec-value-fw:  var(--fw-semibold);
  --spec-value-ff:  var(--font-mono);
  --spec-py:        var(--space-3);

  /* ===================================================
     COMPONENT TOKENS — HUD / TELEMETRY
     =================================================== */

  --hud-ff:          var(--font-mono);
  --hud-fw:          var(--fw-semibold);
  --hud-number-fs:   var(--text-4xl);
  --hud-label-fs:    var(--text-xs);
  --hud-label-txt:   var(--text-muted);
  --hud-label-ls:    var(--ls-widest);
  --hud-number-txt:  var(--ink);
  --hud-accent-txt:  var(--hud);   /* teal suffix colour */
  --hud-bg:          #F0FDFF;
  --hud-border:      #B8ECFB;
  --hud-radius:      var(--radius-card);
  --hud-padding:     var(--space-6) var(--space-8);

  /* ===================================================
     LOGO RULES
     =================================================== */

  --logo-min-h-desktop: 44px;
  --logo-min-h-mobile:  34px;
}

/* =====================================================
   GLOBAL FOCUS RING  (WCAG 2.1 AA §2.4.7)
   :focus-visible keeps the ring for keyboard nav only.
   ===================================================== */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}