/* ============================================================
   Manufacturing AI Solutions (MAI) - Colors & Type
   Manufacturing AI Solutions Design System v1.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;600;700;800&family=Open+Sans:wght@300;400;600;700;800&display=swap');

:root {
  /* -------- BRAND PRIMARIES --------
     Ratio: 60% Navy + White · 25% Blues + Greys · 10% Gold · 5% Accents */
  --mai-navy:           #0A0843;  /* Deep Twilight — primary dark */
  --mai-white:          #FFFFFF;  /* Pure white — primary light surface */
  --mai-black:          #000000;  /* High-contrast text (optional) */
  --mai-gold:           #FFC107;  /* Amber Gold — hero + major accent (10%) */
  --mai-midnight:       #060530;  /* Deepest navy — footers, hero floors */
  --mai-twilight-wash:  #1C1968;  /* Hero gradient mid-stop */

  /* -------- NAVY FAMILY -------- */
  --mai-navy-90:    #0C0A52;
  --mai-navy-70:    #1A1878;
  --mai-navy-50:    #2D2A9E;
  --mai-cobalt:     #3B5DC9;   /* Links, secondary action */
  --mai-periwinkle: #7B9CFF;
  --mai-ice:        #C7D6FE;   /* Light text on dark */

  /* -------- ACCENT SEGMENTS (each has 50/200/400/600/800/950) -------- */
  /* 1. Cerulean — Trust / Info */
  --mai-cerulean-50:  #EBF5FB;
  --mai-cerulean-200: #AED6F1;
  --mai-cerulean-400: #5DADE2;
  --mai-cerulean-600: #2E86C1;
  --mai-cerulean-800: #21618C;
  --mai-cerulean-950: #154360;

  /* 2. Carmine — Urgency / Error */
  --mai-carmine-50:  #FCEAED;
  --mai-carmine-200: #F5A3B0;
  --mai-carmine-400: #E74C5E;
  --mai-carmine-600: #C8102E;
  --mai-carmine-800: #8B0B20;
  --mai-carmine-950: #5C0715;

  /* 3. Autumn Leaf — Energy / Warmth */
  --mai-autumn-50:  #FEF0E4;
  --mai-autumn-200: #FBC89A;
  --mai-autumn-400: #F29540;
  --mai-autumn-600: #E8630A;
  --mai-autumn-800: #9E4307;
  --mai-autumn-950: #6B2D05;

  /* 4. Sea Green — Growth / Success / KPI uplift */
  --mai-seagreen-50:  #E6F7F1;
  --mai-seagreen-200: #80D4B2;
  --mai-seagreen-400: #2DB87E;
  --mai-seagreen-600: #00875A;
  --mai-seagreen-800: #005C3D;
  --mai-seagreen-950: #003D28;

  /* 5. Velvet Orchid — Premium / Innovation */
  --mai-orchid-50:  #F3E8F6;
  --mai-orchid-200: #CDA0D6;
  --mai-orchid-400: #A45CB5;
  --mai-orchid-600: #7B2D8E;
  --mai-orchid-800: #531E61;
  --mai-orchid-950: #381441;

  /* 6. Razzmatazz — Bold / Modern */
  --mai-razz-50:  #FCEAF1;
  --mai-razz-200: #F4A3BF;
  --mai-razz-400: #E5668E;
  --mai-razz-600: #D6336C;
  --mai-razz-800: #932449;
  --mai-razz-950: #632031;

  /* -------- GREYS -------- */
  --mai-ink:      #111827;
  --mai-charcoal: #1F2937;
  --mai-graphite: #374151;
  --mai-slate:    #6B7280;
  --mai-silver:   #9CA3AF;
  --mai-ash:      #D1D5DB;
  --mai-mist:     #E5E7EB;
  --mai-fog:      #F3F4F6;
  --mai-ghost:    #F9FAFB;

  /* -------- GOLD TINTS -------- */
  --mai-cream:     #FFF3CD;   /* soft gold tint · warn surfaces */
  --mai-goldmist:  #FFEAA0;   /* gold-accented dividers */

  /* -------- SEMANTIC FOREGROUND / BACKGROUND -------- */
  --fg-primary:   var(--mai-navy);
  --fg-secondary: var(--mai-graphite);
  --fg-muted:     var(--mai-slate);
  --fg-disabled:  var(--mai-silver);
  --fg-inverse:   #FFFFFF;
  --fg-on-dark:   var(--mai-ice);

  --bg-primary:   var(--mai-white);
  --bg-surface:   var(--mai-white);
  --bg-subtle:    var(--mai-ghost);
  --bg-muted:     var(--mai-fog);
  --bg-dark:      var(--mai-navy);
  --bg-darker:    var(--mai-midnight);

  --border-default: var(--mai-ash);
  --border-subtle:  var(--mai-mist);
  --border-strong:  var(--mai-graphite);

  /* -------- SEMANTIC STATES -------- */
  --color-success: var(--mai-seagreen-600);
  --color-warning: var(--mai-gold);
  --color-error:   var(--mai-carmine-600);
  --color-info:    var(--mai-cerulean-600);
  --color-link:    var(--mai-cobalt);

  /* -------- TYPOGRAPHY: FAMILIES -------- */
  --font-display: 'Raleway', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    'Open Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-data:    'Open Sans', system-ui, -apple-system, Segoe UI, sans-serif;  /* numbers in bold */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* -------- TYPE SCALE (px, mapping to brand pt-scale at 96dpi) -------- */
  --fs-d1: 48px;   /* D1 Hero — Raleway 800 */
  --fs-d2: 36px;   /* D2 Title */
  --fs-d3: 28px;   /* D3 H1 */
  --fs-d4: 22px;   /* D4 H2 */
  --fs-d5: 18px;   /* D5 H3 */
  --fs-b1: 16px;   /* B1 body large */
  --fs-b2: 15px;   /* B2 body */
  --fs-b3: 13px;   /* B3 body small */
  --fs-b4: 11px;   /* B4 ALL CAPS label / kicker */
  --fs-n1: 56px;   /* N1 KPI hero */
  --fs-n2: 36px;   /* N2 KPI large */
  --fs-n3: 22px;   /* N3 KPI small */

  /* -------- LINE HEIGHTS -------- */
  --lh-display: 1.15;   /* @kind font */
  --lh-heading: 1.25;   /* @kind font */
  --lh-body:    1.65;   /* @kind font */
  --lh-tight:   1.1;    /* @kind font */

  /* -------- LETTER SPACING -------- */
  --tracking-eyebrow: 0.18em;   /* ALL CAPS kickers / eyebrows */
  --tracking-label:   0.08em;
  --tracking-display: -0.01em;
  --tracking-tight:   -0.02em;

  /* -------- SPACING SCALE (8pt base) -------- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;

  /* -------- RADII -------- */
  --radius-tight:  2px;   /* tables */
  --radius-badge:  4px;   /* badges */
  --radius-chip:   8px;   /* chips, inputs */
  --radius-card:   12px;  /* cards */
  --radius-hero:   16px;  /* hero blocks */
  --radius-pill:   999px; /* pills */

  /* -------- SHADOWS -------- */
  --shadow-sm:    0 1px 2px rgba(10, 8, 67, 0.06);
  --shadow-md:    0 4px 12px rgba(10, 8, 67, 0.08);
  --shadow-lg:    0 8px 32px rgba(10, 8, 67, 0.12);
  --shadow-xl:    0 16px 48px rgba(10, 8, 67, 0.18);
  --shadow-dark:  0 8px 32px rgba(0, 0, 0, 0.30);
  --shadow-gold-glow: 0 0 0 4px rgba(255, 193, 7, 0.20);

  /* -------- LAYOUT -------- */
  --content-max:  1200px;
  --bleed-max:    1440px;
  --bp-mobile:    768px;

  /* -------- MOTION -------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);  /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --dur-fast:      120ms;   /* @kind other */
  --dur-base:      200ms;   /* @kind other */
  --dur-slow:      320ms;   /* @kind other */

  /* -------- GRADIENTS (signature) -------- */
  --grad-hero:     linear-gradient(135deg, #060530 0%, #1A1878 50%, #0A0843 100%);  /* @kind color */
  --grad-twilight: linear-gradient(135deg, #0C0A52 0%, #1A1878 100%);  /* @kind color */
  --grad-gold-wash: radial-gradient(circle at 80% 0%, rgba(255,193,7,0.12) 0%, transparent 60%);  /* @kind color */
}

/* ============================================================
   SEMANTIC TYPOGRAPHY ROLES
   Use these classes (or @apply equivalents) to keep type on-brand.
   ============================================================ */

.mai-eyebrow,
.mai-kicker {
  font-family: var(--font-body);
  font-size: var(--fs-b4);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mai-gold);
}

.mai-d1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-d1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-primary);
}

.mai-d2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-d2);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
}

.mai-d3, h1.mai {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-d3);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
}

.mai-d4, h2.mai {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-d4);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
}

.mai-d5, h3.mai {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-d5);
  line-height: 1.3;
  color: var(--fg-primary);
}

.mai-body-lg, .mai-b1 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-b1);
  line-height: var(--lh-body);
  color: var(--fg-secondary);
}

.mai-body, .mai-b2, p.mai {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-b2);
  line-height: var(--lh-body);
  color: var(--fg-secondary);
}

.mai-body-sm, .mai-b3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-b3);
  line-height: 1.6;
  color: var(--fg-secondary);
}

.mai-label, .mai-b4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-b4);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* KPI / data callouts */
.mai-kpi-hero {
  font-family: var(--font-data);
  font-weight: 800;
  font-size: var(--fs-n1);
  line-height: 1;
  color: var(--mai-navy);
  letter-spacing: var(--tracking-tight);
}
.mai-kpi-lg {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: var(--fs-n2);
  line-height: 1.05;
  color: var(--mai-navy);
}
.mai-kpi-sm {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: var(--fs-n3);
  color: var(--mai-navy);
}
.mai-kpi-up   { color: var(--color-success); }
.mai-kpi-down { color: var(--color-error); }

/* Inverse (on-dark) variants */
.mai-on-dark           { color: var(--fg-on-dark); }
.mai-on-dark.mai-d1,
.mai-on-dark.mai-d2,
.mai-on-dark.mai-d3,
.mai-on-dark.mai-d4,
.mai-on-dark.mai-d5    { color: #FFFFFF; }
.mai-on-dark.mai-label { color: var(--mai-gold); }

/* Links */
a.mai {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-standard);
}
a.mai:hover { border-bottom-color: var(--color-link); }

/* ============================================================
   DOCUMENT CONTEXT — Word / proposals / standards / letterhead / print
   ------------------------------------------------------------
   Amber gold reads as distracting on the white pages
   of a Word document, proposal, or piece of letterhead.
   In document context we drop gold entirely:
   body copy is BLACK, all headings & subheadings are brand navy,
   eyebrows/kickers/rules/dividers recolor from gold → navy.

   Apply by scoping a document's root:
     <body class="mai-document">            (or)
     <div data-mai-context="document"> … </div>

   Everything keyed to the --mai-* tokens recolors automatically —
   no per-element edits needed. Reach for navy or cobalt when you
   need emphasis; never gold inside a document.
   ============================================================ */
.mai-document,
[data-mai-context="document"] {
  /* Neutralize the hero accent → navy for anything that referenced gold
     (eyebrows, title rules, bullets, chips, KPI accent lines, etc.) */
  --mai-gold:       var(--mai-navy);
  --mai-goldmist:   var(--mai-ice);
  --mai-cream:      var(--mai-fog);

  /* Body copy is solid black for maximum print legibility;
     headings/subheadings stay brand navy via --fg-primary. */
  --fg-primary:     var(--mai-navy);   /* H1–H4, display roles */
  --fg-secondary:   var(--mai-black);  /* body, paragraphs */
  --fg-muted:       var(--mai-graphite);

  /* Keep a real warning hue (autumn orange), not gold. */
  --color-warning:  var(--mai-autumn-600);

  /* Drop the gold glow + gold radial wash. */
  --shadow-gold-glow: 0 0 0 3px rgba(10, 8, 67, 0.18);
  --grad-gold-wash:   none;  /* @kind color */

  color: var(--mai-black);
}

/* Eyebrows / kickers / labels: navy in documents, not gold. */
.mai-document .mai-eyebrow,
.mai-document .mai-kicker,
[data-mai-context="document"] .mai-eyebrow,
[data-mai-context="document"] .mai-kicker {
  color: var(--mai-navy);
}

/* On the occasional dark cover inside a document, labels go ice (not gold). */
.mai-document .mai-on-dark.mai-label,
[data-mai-context="document"] .mai-on-dark.mai-label {
  color: var(--mai-ice);
}

/* Default unclassed body text in a document is black. */
.mai-document,
.mai-document p,
.mai-document li,
[data-mai-context="document"],
[data-mai-context="document"] p,
[data-mai-context="document"] li {
  color: var(--mai-black);
}

/* Headings & subheadings default to navy even without .mai-* classes. */
.mai-document :is(h1, h2, h3, h4, h5, h6),
[data-mai-context="document"] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--mai-navy);
}