/* ==========================================================================
   ALG Design System — Colors & Type
   Aviation Lead Generation · B2B agency · v1.0
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@400;500;600&family=Source+Code+Pro:wght@500;600&display=swap');

:root {
  /* ------------------------------------------------------------------
     COLOR TOKENS — raw palette
     ------------------------------------------------------------------ */
  --efis-blue:        #0E2F44;  /* primary anchor — nav, headers, hero */
  --efis-blue-800:    #0A2434;  /* pressed / deeper fill */
  --efis-blue-600:    #1A4560;  /* hover on dark surfaces */

  --steel-blue:       #4682B4;  /* links, secondary actions */
  --steel-blue-600:   #3A6F9A;  /* link hover */
  --steel-blue-100:   #E3EDF5;  /* tinted bg for info states */

  --amber-caution:    #E8912E;  /* CTA + data highlight */
  --amber-hover:      #D07E22;  /* CTA hover */
  --amber-100:        #FDECD6;  /* soft amber tint */

  --avionics-black:   #1C1C1C;  /* body text, headings */
  --taxiway-gray:     #5A6670;  /* secondary text, captions */
  --fog-gray:         #D1D5DB;  /* borders, dividers */
  --fog-gray-soft:    #E5E7EB;  /* subtle dividers */

  --soft-white:       #F5F5F5;  /* alternating section bg */
  --white:            #FFFFFF;  /* cards, content area */

  /* Semantic status (derived for dashboard / CRM) */
  --success:          #2E8B57;  /* runway green */
  --success-100:      #E3F1E8;
  --danger:           #C0392B;  /* warning red — used sparingly */
  --danger-100:       #F8E2DF;

  /* ------------------------------------------------------------------
     SEMANTIC COLOR ROLES
     ------------------------------------------------------------------ */
  --color-primary:          var(--efis-blue);
  --color-primary-hover:    var(--efis-blue-600);
  --color-secondary:        var(--steel-blue);
  --color-secondary-hover:  var(--steel-blue-600);
  --color-accent:           var(--amber-caution);
  --color-accent-hover:     var(--amber-hover);

  --color-text:             var(--avionics-black);
  --color-text-secondary:   var(--taxiway-gray);
  --color-text-inverse:     var(--white);
  --color-link:             var(--steel-blue);
  --color-link-hover:       var(--steel-blue-600);

  --color-bg:               var(--white);
  --color-bg-subtle:        var(--soft-white);
  --color-bg-dark:          var(--efis-blue);

  --color-border:           var(--fog-gray);
  --color-border-soft:      var(--fog-gray-soft);

  /* ------------------------------------------------------------------
     TYPE TOKENS
     ------------------------------------------------------------------ */
  --font-display:  'Montserrat', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:     'Open Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:     'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-body:       400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-black:      800;

  /* Type scale (desktop) — matches design reference */
  --fs-h1:         42px;
  --lh-h1:         1.15;
  --ls-h1:         -1px;

  --fs-h2:         30px;
  --lh-h2:         1.15;
  --ls-h2:         -0.5px;

  --fs-h3:         26px;
  --lh-h3:         1.3;

  --fs-h4:         22px;
  --lh-h4:         1.3;

  --fs-h5:         18px;
  --lh-h5:         1.4;

  --fs-body:       16px;
  --lh-body:       1.65;

  --fs-small:      14px;
  --lh-small:      1.5;

  --fs-mono:       16px;
  --lh-mono:       1.4;

  /* ------------------------------------------------------------------
     SPACING — 8px base grid
     ------------------------------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;   /* mobile section padding */
  --space-7:  64px;   /* desktop section padding */
  --space-8:  96px;
  --space-9:  128px;

  /* ------------------------------------------------------------------
     RADIUS
     ------------------------------------------------------------------ */
  --radius-sm: 6px;   /* buttons, tags, small chips */
  --radius-md: 10px;  /* cards, inputs */
  --radius-lg: 16px;  /* section cards, large containers */

  /* ------------------------------------------------------------------
     SHADOWS — instrument-panel depth, never fluffy
     ------------------------------------------------------------------ */
  --shadow-sm:  0 1px 2px rgba(14, 47, 68, 0.06), 0 1px 1px rgba(14, 47, 68, 0.04);
  --shadow-md:  0 4px 10px rgba(14, 47, 68, 0.08), 0 2px 4px rgba(14, 47, 68, 0.05);
  --shadow-lg:  0 12px 28px rgba(14, 47, 68, 0.12), 0 4px 10px rgba(14, 47, 68, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(14, 47, 68, 0.08);

  /* ------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------ */
  --container-max: 1200px;
  --content-max:    720px;

  /* ------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* ==========================================================================
   BASE ELEMENTS
   ========================================================================== */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text);
  margin: 0;
}

h1 { font-weight: var(--fw-black);    font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-weight: var(--fw-bold);     font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-weight: var(--fw-bold);     font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-h4); }
h5 { font-weight: var(--fw-semibold); font-size: var(--fs-h5); line-height: var(--lh-h5); }

p, li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}

small, .text-small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--color-text-secondary);
}

.text-mono, code, kbd {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  color: var(--color-text);
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--color-link-hover); text-decoration: underline; }

/* Eyebrow / section label — ALL CAPS, small, tracked */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Data / metric — Source Code Pro, tabular */
.data, .metric {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}