/* =============================================================
   REVAMP CDI — Foundational Tokens
   Layer 1 Corporate · Layer 2 Product · Layer 3 Structural · Layer 4 Semantic
   Source: BRAND_SYSTEM.md (see _source/)
   ============================================================= */

/* --- Webfonts (Google Fonts substitutes — see README §Fonts) --- */
@import url('../fonts/jakarta-dmsans-jetbrains.css');

/* =============================================================
   L1 — Corporate Brand (REVAMP CDI) — invariant across products
   ============================================================= */
:root {
  --brand-primary:        #0B4E83;   /* REVAMP wordmark blue */
  --brand-primary-deep:   #173686;   /* Hover / active outlines */
  --brand-cta:            #FFAD20;   /* Amber CTA accent */
  --brand-slate:          #707B92;   /* Secondary text / borders */
  --brand-surface:        #FFFFFF;

  /* L1 Corporate marketing palette (REVAMP corporate site)
     ----------------------------------------------------- */
  --brand-ink:            #282828;   /* Corporate dark ink — body text, dark sections */
  --brand-cream:          #F8F5EF;   /* Corporate warm page background */
  --brand-orange:         #EA580C;   /* Molten orange — corporate accent, italic emphasis */
  --brand-orange-hover:   #C2410C;

  --brand-font-display:   'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --brand-font-body:      'DM Sans', system-ui, -apple-system, sans-serif;
  --brand-font-mono:      'JetBrains Mono', ui-monospace, Consolas, monospace;
}

/* =============================================================
   L2 — Product Brand: AIES O (Operations) — the live product
   ============================================================= */
:root,
:root[data-product="aies-o"] {
  --product-name:                      "AIES O";
  --product-accent:                    #7C3AED;
  --product-accent-hover:              #6D28D9;
  --product-accent-active:             #5B21B6;
  --product-accent-light:              #A855F7;
  --product-accent-pale:               #C4B5FD;

  --product-gradient-from:             #818CF8;
  --product-gradient-to:               #C084FC;
  --product-gradient:                  linear-gradient(135deg, var(--product-gradient-from), var(--product-gradient-to));

  --product-cta-from:                  #4F46E5;
  --product-cta-to:                    #7C3AED;
  --product-cta:                       linear-gradient(135deg, var(--product-cta-from), var(--product-cta-to));

  --product-avatar-from:               #6C3AED;
  --product-avatar-to:                 #3B82F6;

  --product-glow-rgb:                  124, 58, 237;
  --product-glow:                      rgba(var(--product-glow-rgb), 0.25);
  --product-glow-strong:               rgba(var(--product-glow-rgb), 0.5);

  --product-text-gradient-light-from:  #1A1A2E;
  --product-text-gradient-light-to:    #7C3AED;
  --product-text-gradient-dark-from:   #F0F0F0;
  --product-text-gradient-dark-to:     #C4B5FD;
}

/* AIES E (Engineering) — Teal */
:root[data-product="aies-e"] {
  --product-name:                      "AIES E";
  --product-accent:                    #14B8A6;
  --product-accent-hover:              #0F9488;
  --product-accent-active:             #0D7C70;
  --product-accent-light:              #5EEAD4;
  --product-accent-pale:               #99F6E4;
  --product-gradient-from:             #2DD4BF;
  --product-gradient-to:               #06B6D4;
  --product-gradient:                  linear-gradient(135deg, var(--product-gradient-from), var(--product-gradient-to));
  --product-cta-from:                  #0891B2;
  --product-cta-to:                    #14B8A6;
  --product-cta:                       linear-gradient(135deg, var(--product-cta-from), var(--product-cta-to));
  --product-avatar-from:               #14B8A6;
  --product-avatar-to:                 #3B82F6;
  --product-glow-rgb:                  20, 184, 166;
  --product-glow:                      rgba(var(--product-glow-rgb), 0.25);
  --product-glow-strong:               rgba(var(--product-glow-rgb), 0.5);
  --product-text-gradient-light-from:  #1A1A2E;
  --product-text-gradient-light-to:    #0891B2;
  --product-text-gradient-dark-from:   #F0F0F0;
  --product-text-gradient-dark-to:     #5EEAD4;
}

/* AIES F (Finance/Controlling) — Amber */
:root[data-product="aies-f"] {
  --product-name:                      "AIES F";
  --product-accent:                    #F59E0B;
  --product-accent-hover:              #D97706;
  --product-accent-active:             #B45309;
  --product-accent-light:              #FBBF24;
  --product-accent-pale:               #FDE68A;
  --product-gradient-from:             #FBBF24;
  --product-gradient-to:               #F97316;
  --product-gradient:                  linear-gradient(135deg, var(--product-gradient-from), var(--product-gradient-to));
  --product-cta-from:                  #D97706;
  --product-cta-to:                    #F59E0B;
  --product-cta:                       linear-gradient(135deg, var(--product-cta-from), var(--product-cta-to));
  --product-avatar-from:               #F59E0B;
  --product-avatar-to:                 #0B4E83;
  --product-glow-rgb:                  245, 158, 11;
  --product-glow:                      rgba(var(--product-glow-rgb), 0.25);
  --product-glow-strong:               rgba(var(--product-glow-rgb), 0.5);
  --product-text-gradient-light-from:  #1A1A2E;
  --product-text-gradient-light-to:    #D97706;
  --product-text-gradient-dark-from:   #F0F0F0;
  --product-text-gradient-dark-to:     #FBBF24;
}

/* =============================================================
   L3 — Structural Tokens (constant across all products)
   ============================================================= */
:root {
  /* Spacing — 8px base, half-steps for mobile/touch */
  --space-0:     0;
  --space-px:    1px;
  --space-0_5:   2px;
  --space-1:     4px;
  --space-1_5:   6px;
  --space-2:     8px;
  --space-2_5:   10px;
  --space-3:     12px;
  --space-3_5:   14px;
  --space-4:     16px;
  --space-5:     20px;
  --space-6:     24px;
  --space-7:     28px;
  --space-8:     32px;
  --space-11:    44px;  /* min touch target */
  --space-15:    60px;

  /* Radius */
  --radius-xs:        4px;
  --radius-sm:        6px;
  --radius-md:        8px;
  --radius-md-plus:   10px;   /* most common — cards, chips, toasts */
  --radius-lg:        12px;
  --radius-lg-plus:   14px;
  --radius-xl:        16px;
  --radius-2xl:       20px;
  --radius-full:      9999px; /* pills */
  --radius-circle:    50%;

  /* Z-index layers */
  --z-base:             0;
  --z-decoration:       1;
  --z-elevated:         10;
  --z-page-overlay:     50;
  --z-sticky:           100;
  --z-backdrop:         200;
  --z-drawer:           210;
  --z-modal:            300;
  --z-modal-content:    310;
  --z-floating:         400;
  --z-floating-active:  500;
  --z-critical-modal:   1000;
  --z-toast:            1500;
  --z-bug-reporter:     2000;

  /* Type scale */
  --text-2xs:        9px;
  --text-xs:         10px;
  --text-xs-plus:    11px;
  --text-sm:         12px;
  --text-sm-plus:    13px;
  --text-base:       14px;
  --text-base-plus:  15px;
  --text-md:         16px;
  --text-md-plus:    17px;
  --text-lg:         18px;
  --text-xl:         20px;
  --text-2xl:        24px;
  --text-3xl:        32px;
  --text-4xl:        44px;
  --text-5xl:        60px;

  /* Breakpoints */
  --bp-xs:       480px;
  --bp-sm:       720px;
  --bp-md:       768px;
  --bp-md-plus:  769px;
  --bp-lg:       1024px;
}

/* =============================================================
   L4 — Semantic App Tokens (theme-reactive)
   ============================================================= */

/* Light theme (default) */
:root,
:root[data-theme="light"] {
  --bg:               #F8F9FB;
  --bg-card:          #FFFFFF;
  --surface-1:        #F9FAFB;
  --surface-2:        #F3F4F6;
  --code-bg:          #F4F3EC;

  --text:             #6B6375;
  --text-h:           #08060D;
  --text-primary:     #0F1117;
  --text-secondary:   #6B7280;
  --text-tertiary:    #9CA3AF;

  --border:           #E5E7EB;
  --border-subtle:    #F3F4F6;
  --border-strong:    #D1D5DB;

  --status-healthy:        #34D399;
  --status-healthy-bg:     rgba(52, 211, 153, 0.10);
  --status-stale:          #FBBF24;
  --status-stale-bg:       rgba(251, 191, 36, 0.10);
  --status-disconnected:   #F87171;
  --status-disconnected-bg:rgba(248, 113, 113, 0.10);

  --oee-good:         #34D399;
  --oee-mid:          #FBBF24;
  --oee-bad:          #F87171;
  --oee-good-track:   rgba(52, 211, 153, 0.18);
  --oee-mid-track:    rgba(251, 191, 36, 0.18);
  --oee-bad-track:    rgba(248, 113, 113, 0.18);

  --shadow-sm:        0 1px 2px rgba(15, 17, 23, 0.04);
  --shadow:           0 2px 8px rgba(15, 17, 23, 0.06), 0 1px 2px rgba(15, 17, 23, 0.04);
  --shadow-lg:        0 12px 32px rgba(15, 17, 23, 0.10), 0 4px 12px rgba(15, 17, 23, 0.06);
  --shadow-glow-product: 0 0 16px rgba(var(--product-glow-rgb), 0.30);
  --shadow-glow-healthy: 0 0 12px rgba(52, 211, 153, 0.40);
  --shadow-glow-disconnected: 0 0 12px rgba(248, 113, 113, 0.40);

  /* App accent aliases on Product accent (Phase 2 ready) */
  --accent:        var(--product-accent);
  --accent-light:  var(--product-accent-light);
  --accent-bg:     rgba(var(--product-glow-rgb), 0.08);
  --accent-border: rgba(var(--product-glow-rgb), 0.20);

  --topbar-bg:               rgba(255, 255, 255, 0.85);
  --topbar-border:           #E5E7EB;
  --topbar-brand-text-from:  var(--product-text-gradient-light-from);
  --topbar-brand-text-to:    var(--product-text-gradient-light-to);
}

/* Dark theme */
:root[data-theme="dark"] {
  --bg:               #0F1117;
  --bg-card:          #1A1C25;
  --surface-1:        #1F2028;
  --surface-2:        #24262F;
  --code-bg:          #1F2028;

  --text:             #9CA3AF;
  --text-h:           #F3F4F6;
  --text-primary:     #F3F4F6;
  --text-secondary:   #9CA3AF;
  --text-tertiary:    #6B7280;

  --border:           #2A2D38;
  --border-subtle:    #1F2028;
  --border-strong:    #3B3F4C;

  --status-healthy:        #4ADE80;
  --status-healthy-bg:     rgba(74, 222, 128, 0.12);
  --status-stale:          #FBBF24;
  --status-stale-bg:       rgba(251, 191, 36, 0.12);
  --status-disconnected:   #F87171;
  --status-disconnected-bg:rgba(248, 113, 113, 0.12);

  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow:           0 2px 8px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-lg:        0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.30);

  --topbar-bg:               rgba(26, 28, 37, 0.85);
  --topbar-border:           #2A2D38;
  --topbar-brand-text-from:  var(--product-text-gradient-dark-from);
  --topbar-brand-text-to:    var(--product-text-gradient-dark-to);
}

/* =============================================================
   Element-level type rules (semantic, theme-reactive)
   ============================================================= */
html, body {
  font-family: var(--brand-font-body);
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--brand-font-display);
  color: var(--text-h);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: var(--text-3xl); line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); line-height: 1.2;  letter-spacing: -0.015em; }
h3 { font-size: var(--text-xl);  line-height: 1.25; }
h4 { font-size: var(--text-lg);  line-height: 1.3;  }
h5 { font-size: var(--text-md);  line-height: 1.4;  font-weight: 600; }
h6 { font-size: var(--text-sm);  line-height: 1.4;  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }

p  { margin: 0; }
small { font-size: var(--text-sm); color: var(--text-secondary); }

code, pre, kbd, samp {
  font-family: var(--brand-font-mono);
  font-size: 0.92em;
}
code {
  background: var(--code-bg);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--product-accent-hover); text-decoration: underline; }

/* Utility: brand gradient text (used for "AIES" word in topbar) */
.brand-gradient-text {
  background: linear-gradient(135deg, var(--topbar-brand-text-from), var(--topbar-brand-text-to));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}