/* ============================================================
   Grumpy Pilot Design System — global entry point.
   Consumers link this single file. Import order only.
   ============================================================ */

/* Grumpy Pilot — Webfonts
   B612 + B612 Mono: designed by Airbus & Intactile DESIGN for aircraft
   cockpit displays (ADS project). Authentic aviation legibility typeface.
   Loaded from Google Fonts. To fully self-host, drop the .ttf files in
   assets/fonts/ and replace these @import/@font-face rules. */

/* latin */
@font-face {
  font-family: 'B612';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/B612-Italic.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'B612';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/B612-BoldItalic.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'B612';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/B612-Regular.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'B612';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/B612-Bold.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'B612 Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/B612Mono-Regular.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'B612 Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/B612Mono-Bold.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   Grumpy Pilot — Color System
   Palette derived from airport visual language:
   painted runway/taxiway markings, mandatory & information
   signage, cockpit instrument panels.
   ============================================================ */

:root {
  /* ---- Brand core (from brief) ---- */
  --gp-white:  #FBFCFF;   /* cloud white — page & marking paint */
  --gp-red:    #DF2935;   /* runway-hold / mandatory red */
  --gp-amber:  #FFCB47;   /* taxiway marking amber / caution */
  --gp-slate:  #2E4057;   /* instrument slate */
  --gp-navy:   #0E273C;   /* apron night navy — primary ink */
  --gp-blue:   #001151;   /* information-sign deep blue */

  /* ---- Extended / added ---- */
  --gp-green:  #1B8A5E;   /* taxiway centerline-light green (success) */
  --gp-amber-deep: #E0A21F; /* amber pressed / border */
  --gp-red-deep:   #B21F29; /* red pressed */
  --gp-blue-lit:   #2A6FDB; /* runway edge-light blue (info accent) */
  --gp-sky:    #E8F0FA;   /* washed sky tint */
  --gp-amber-wash: #FFF3D2; /* caution tint */
  --gp-red-wash:   #FBE0E2; /* alert tint */
  --gp-green-wash: #DDF0E6; /* clear tint */

  /* ---- Neutral ink scale (slate→navy family) ---- */
  --gp-ink-900: #0A1F31;
  --gp-ink-800: #0E273C;
  --gp-ink-700: #1C3A54;
  --gp-ink-600: #2E4057;
  --gp-ink-500: #4B5D72;
  --gp-ink-400: #6C7C8F;
  --gp-ink-300: #97A3B2;
  --gp-ink-200: #C2CAD4;
  --gp-ink-150: #D8DEE6;
  --gp-ink-100: #E7EBF0;
  --gp-ink-50:  #F2F5F8;
  --gp-ink-25:  #F8FAFC;

  /* ============================================================
     Semantic aliases
     ============================================================ */

  /* Surfaces */
  --surface-page:    var(--gp-ink-25);
  --surface-card:    var(--gp-white);
  --surface-sunken:  var(--gp-ink-50);
  --surface-raised:  var(--gp-white);
  --surface-inverse: var(--gp-navy);
  --surface-inverse-2: var(--gp-ink-900);

  /* Text */
  --text-primary:   var(--gp-navy);
  --text-secondary: var(--gp-ink-600);
  --text-muted:     var(--gp-ink-400);
  --text-inverse:   var(--gp-white);
  --text-on-amber:  var(--gp-navy);
  --text-link:      var(--gp-blue-lit);

  /* Borders */
  --border-subtle:  var(--gp-ink-100);
  --border-default: var(--gp-ink-200);
  --border-strong:  var(--gp-ink-600);
  --border-marking: var(--gp-amber);

  /* Accent (amber marking) */
  --accent:         var(--gp-amber);
  --accent-deep:    var(--gp-amber-deep);
  --accent-ink:     var(--gp-navy);
  --accent-wash:    var(--gp-amber-wash);

  /* Status — mapped to airfield sign semantics */
  --danger:        var(--gp-red);      /* mandatory / stop */
  --danger-deep:   var(--gp-red-deep);
  --danger-wash:   var(--gp-red-wash);
  --info:          var(--gp-blue);     /* information */
  --info-lit:      var(--gp-blue-lit);
  --info-wash:     var(--gp-sky);
  --success:       var(--gp-green);    /* cleared */
  --success-wash:  var(--gp-green-wash);
  --caution:       var(--gp-amber);
  --caution-wash:  var(--gp-amber-wash);

  /* Focus ring */
  --focus-ring:    var(--gp-blue-lit);
}

/* ============================================================
   Grumpy Pilot — Typography
   B612 (Airbus cockpit sans) for everything UI + display.
   B612 Mono for data: flight codes, coordinates, times, tail #s.
   ============================================================ */

:root {
  --font-sans: 'B612', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'B612 Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Weights (B612 ships 400 / 700 only) */
  --weight-regular: 400;
  --weight-bold: 700;

  /* Type scale — 1.25 major-third-ish, tuned for signage clarity */
  --text-3xs: 10px;
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;   /* base body */
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 46px;
  --text-5xl: 60px;
  --text-6xl: 80px;

  /* Line heights */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing — signage & stencil use wide tracking */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;
  --tracking-stencil: 0.22em;  /* runway-number / boarding-sign caps */

  /* Semantic roles */
  --display-family: var(--font-sans);
  --display-weight: var(--weight-bold);
  --display-leading: var(--leading-tight);

  --heading-family: var(--font-sans);
  --heading-weight: var(--weight-bold);

  --body-family: var(--font-sans);
  --body-size: var(--text-md);
  --body-leading: var(--leading-normal);

  --mono-family: var(--font-mono);
}

/* ============================================================
   Grumpy Pilot — Spacing & Layout
   Base unit 4px. Named steps echo painted-marking rhythm.
   ============================================================ */

:root {
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Container widths */
  --container-sm: 640px;
  --container-md: 860px;
  --container-lg: 1120px;
  --container-xl: 1320px;

  /* Runway-marking geometry (dashes, stripes) */
  --marking-stripe: 14px;   /* hazard-stripe width */
  --marking-gap: 14px;
  --marking-dash: 28px;     /* centerline dash length */
  --marking-dash-gap: 20px;
}

/* ============================================================
   Grumpy Pilot — Effects: radii, borders, shadows, motion, patterns
   Aesthetic: painted metal & signage. Modest radii, crisp borders,
   low diffuse shadows. Amber caution-stripe + dashed-centerline motifs.
   ============================================================ */

:root {
  /* Radii — signage panels have small, functional rounding */
  --radius-none: 0px;
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Border widths */
  --border-hair: 1px;
  --border-thick: 2px;
  --border-marking-w: 3px;   /* painted marking edge */

  /* Shadows — grounded, low, cool-navy tint (apron light) */
  --shadow-xs: 0 1px 0 rgba(14, 39, 60, 0.05);
  --shadow-sm: 0 1px 2px rgba(14, 39, 60, 0.08), 0 1px 1px rgba(14, 39, 60, 0.04);
  --shadow-md: 0 2px 6px rgba(14, 39, 60, 0.10), 0 1px 2px rgba(14, 39, 60, 0.06);
  --shadow-lg: 0 8px 24px rgba(14, 39, 60, 0.14), 0 2px 6px rgba(14, 39, 60, 0.08);
  --shadow-xl: 0 18px 48px rgba(10, 31, 49, 0.22), 0 6px 14px rgba(10, 31, 49, 0.12);

  /* Focus ring */
  --ring-width: 3px;
  --ring-offset: 2px;
  --ring-color: rgba(42, 111, 219, 0.45);

  /* Motion — mechanical, brisk, minimal bounce (instruments, not toys) */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* ---- Signature patterns (use as background-image) ---- */

  /* Hazard / caution diagonal stripes (amber on navy) */
  --pattern-hazard: repeating-linear-gradient(
    -45deg,
    var(--gp-amber) 0 14px,
    var(--gp-navy) 14px 28px
  );
  /* Subtle amber caution edge on light */
  --pattern-hazard-soft: repeating-linear-gradient(
    -45deg,
    var(--gp-amber) 0 10px,
    transparent 10px 20px
  );
  /* Taxiway centerline: dashed */
  --marking-dashed-border: var(--border-thick) dashed var(--gp-amber);
}