/* ============================================================================
   INNOMOTICS DESIGN SYSTEM — gearmotors.net
   Single source of truth for colors, typography, spacing, elevation, motion.
   Direction: Innomotics brand — petrol/teal on light. Light default + dark opt-in.
   Load this BEFORE style.css. All new/restyled components consume these tokens;
   legacy hardcoded values are being migrated onto them.
   ============================================================================ */

:root {
  /* ---- Brand palette (Innomotics-aligned) ------------------------------- */
  --c-petrol-900: #003b42;
  --c-petrol-800: #004e58;
  --c-petrol-700: #00646e;   /* PRIMARY — deep petrol */
  --c-petrol-600: #007a86;
  --c-petrol-500: #009baa;   /* teal */
  --c-petrol-400: #2bb4c2;
  --c-petrol-300: #6fd0da;
  --c-petrol-200: #a9e4ea;
  --c-petrol-100: #d7f2f5;
  --c-petrol-50:  #eefafb;

  --c-mint-600: #00a67d;
  --c-mint-500: #00c896;     /* SECONDARY accent (heritage green) */
  --c-mint-400: #3ad7ae;
  --c-mint-100: #d6f7ec;

  /* ---- Neutral ramp ----------------------------------------------------- */
  --c-ink-900: #0e1b22;      /* primary text on light */
  --c-ink-800: #16262e;
  --c-ink-700: #29404a;
  --c-ink-600: #445a64;
  --c-ink-500: #64798222;    /* (unused placeholder-safe) */
  --c-slate-600: #5b6b73;    /* secondary text */
  --c-slate-500: #7c8b92;    /* muted text */
  --c-slate-400: #9fabb1;
  --c-line: #e3e9ec;         /* borders / hairlines */
  --c-line-strong: #cdd6da;
  --c-surface-3: #eef2f4;
  --c-surface-2: #f4f7f8;
  --c-surface-1: #f7f9fa;    /* page background */
  --c-surface-0: #ffffff;    /* cards */

  /* ---- Feedback --------------------------------------------------------- */
  --c-success: #129d6f;
  --c-warning: #d98a12;
  --c-danger:  #d1435b;
  --c-info:    var(--c-petrol-500);

  /* ---- Semantic tokens (consume these in components) -------------------- */
  --bg-page:        var(--c-surface-1);
  --bg-surface:     var(--c-surface-0);
  --bg-surface-alt: var(--c-surface-2);
  --bg-sunken:      var(--c-surface-3);
  --bg-inverse:     var(--c-petrol-900);

  --text-strong:  var(--c-ink-900);
  --text-body:    var(--c-ink-700);
  --text-muted:   var(--c-slate-500);
  --text-on-brand:#ffffff;
  --text-on-dark: #e8f0f2;

  --brand:        var(--c-petrol-700);
  --brand-hover:  var(--c-petrol-800);
  --brand-active: var(--c-petrol-900);
  --brand-soft:   var(--c-petrol-50);
  --brand-soft-2: var(--c-petrol-100);
  --accent:       var(--c-mint-500);
  --accent-hover: var(--c-mint-600);

  --border:        var(--c-line);
  --border-strong: var(--c-line-strong);
  --focus-ring:    var(--c-petrol-500);

  /* ---- Typography ------------------------------------------------------- */
  --font-head: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;

  --fs-2xs: .6875rem;   /* 11 */
  --fs-xs:  .75rem;     /* 12 */
  --fs-sm:  .875rem;    /* 14 */
  --fs-base:1rem;       /* 16 */
  --fs-md:  1.125rem;   /* 18 */
  --fs-lg:  1.375rem;   /* 22 */
  --fs-xl:  1.75rem;    /* 28 */
  --fs-2xl: 2.25rem;    /* 36 */
  --fs-3xl: 3rem;       /* 48 */
  --fs-4xl: clamp(2.6rem, 5vw, 4.25rem);

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  --tracking-wide: .04em;
  --tracking-caps: .12em;

  /* ---- Spacing scale (4pt) --------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-9: 4rem;    --sp-10: 5rem;   --sp-12: 6rem;   --sp-16: 8rem;

  /* ---- Radii ------------------------------------------------------------ */
  --r-xs: 4px;  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;
  --r-xl: 22px; --r-2xl: 30px; --r-pill: 999px;

  /* ---- Elevation (soft, enterprise) ------------------------------------ */
  --sh-xs: 0 1px 2px rgba(14,27,34,.06);
  --sh-sm: 0 2px 6px rgba(14,27,34,.07), 0 1px 2px rgba(14,27,34,.05);
  --sh-md: 0 8px 24px rgba(14,27,34,.09), 0 2px 6px rgba(14,27,34,.05);
  --sh-lg: 0 18px 48px rgba(14,27,34,.13), 0 6px 14px rgba(14,27,34,.07);
  --sh-brand: 0 10px 30px rgba(0,100,110,.28);
  --ring: 0 0 0 3px var(--c-petrol-200);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1280px;
  --container-wide: 1400px;
  --nav-h: 72px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .15s;
  --t-med:  .28s;
  --t-slow: .5s;

  /* ---- Gradients / effects --------------------------------------------- */
  --grad-brand: linear-gradient(135deg, var(--c-petrol-700) 0%, var(--c-petrol-500) 100%);
  --grad-brand-deep: linear-gradient(160deg, var(--c-petrol-900) 0%, var(--c-petrol-700) 60%, var(--c-petrol-600) 100%);
  --grad-hero: radial-gradient(1200px 600px at 85% -10%, var(--c-petrol-100) 0%, transparent 55%),
               linear-gradient(180deg, var(--c-surface-0) 0%, var(--c-surface-1) 100%);
}

/* ============================================================================
   DARK THEME — opt-in via [data-theme="dark"] on <html> (toggle) or system.
   ============================================================================ */
:root[data-theme="dark"] {
  --bg-page:        #0b171d;
  --bg-surface:     #10242c;
  --bg-surface-alt: #0e1f26;
  --bg-sunken:      #0a141a;
  --bg-inverse:     #061014;

  --text-strong:  #eaf3f5;
  --text-body:    #c4d3d8;
  --text-muted:   #8ea3ab;
  --text-on-dark: #eaf3f5;

  --brand:        var(--c-petrol-400);
  --brand-hover:  var(--c-petrol-300);
  --brand-active: var(--c-petrol-200);
  --brand-soft:   #0f2a30;
  --brand-soft-2: #123840;
  --accent:       var(--c-mint-500);

  --border:        #1e343d;
  --border-strong: #2a4550;
  --focus-ring:    var(--c-petrol-400);

  --sh-xs: 0 1px 2px rgba(0,0,0,.4);
  --sh-sm: 0 2px 6px rgba(0,0,0,.45);
  --sh-md: 0 8px 24px rgba(0,0,0,.5);
  --sh-lg: 0 18px 48px rgba(0,0,0,.6);
  --ring: 0 0 0 3px rgba(43,180,194,.35);

  --grad-hero: radial-gradient(1200px 600px at 85% -10%, #0f3138 0%, transparent 55%),
               linear-gradient(180deg, #0d1f26 0%, #0b171d 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page:#0b171d; --bg-surface:#10242c; --bg-surface-alt:#0e1f26; --bg-sunken:#0a141a; --bg-inverse:#061014;
    --text-strong:#eaf3f5; --text-body:#c4d3d8; --text-muted:#8ea3ab; --text-on-dark:#eaf3f5;
    --brand:var(--c-petrol-400); --brand-hover:var(--c-petrol-300); --brand-active:var(--c-petrol-200);
    --brand-soft:#0f2a30; --brand-soft-2:#123840; --accent:var(--c-mint-500);
    --border:#1e343d; --border-strong:#2a4550; --focus-ring:var(--c-petrol-400);
    --grad-hero: radial-gradient(1200px 600px at 85% -10%, #0f3138 0%, transparent 55%), linear-gradient(180deg,#0d1f26 0%,#0b171d 100%);
  }
}

/* ============================================================================
   PRIMITIVES — small reusable utilities/components on top of the tokens.
   Prefixed .ds- to avoid clashing with the legacy BEM classes during migration.
   ============================================================================ */

.ds-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); }
.ds-container--wide { max-width: var(--container-wide); }

.ds-eyebrow {
  font: 700 var(--fs-xs)/1 var(--font-body);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--brand); display: inline-flex; align-items: center; gap: var(--sp-2);
}
.ds-eyebrow::before { content:""; width:22px; height:2px; background:var(--brand); border-radius:2px; }

.ds-h1 { font: 700 var(--fs-4xl)/var(--lh-tight) var(--font-head); color: var(--text-strong); letter-spacing:.01em; }
.ds-h2 { font: 700 var(--fs-2xl)/var(--lh-snug) var(--font-head); color: var(--text-strong); }
.ds-lead { font-size: var(--fs-md); color: var(--text-body); line-height: var(--lh-body); }

/* Buttons ------------------------------------------------------------------ */
.ds-btn {
  --_bg: var(--brand); --_fg: var(--text-on-brand); --_bd: transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font: 700 var(--fs-sm)/1 var(--font-body); letter-spacing:.01em;
  padding: .85rem 1.5rem; border-radius: var(--r-pill);
  background: var(--_bg); color: var(--_fg); border:1.5px solid var(--_bd);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background var(--t-fast) var(--ease);
}
.ds-btn:hover { transform: translateY(-2px); box-shadow: var(--sh-brand); background: var(--brand-hover); }
.ds-btn:active { transform: translateY(0); }
.ds-btn:focus-visible { outline:none; box-shadow: var(--ring); }
.ds-btn--accent { --_bg: var(--accent); --_fg:#043; }
.ds-btn--accent:hover { background: var(--accent-hover); }
.ds-btn--ghost { --_bg: transparent; --_fg: var(--brand); --_bd: var(--border-strong); }
.ds-btn--ghost:hover { background: var(--brand-soft); box-shadow:none; border-color: var(--brand); }
.ds-btn--lg { font-size: var(--fs-base); padding: 1.05rem 2rem; }

/* Card --------------------------------------------------------------------- */
.ds-card {
  background: var(--bg-surface); border:1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.ds-card--interactive:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--brand-soft-2); }

/* Chip / badge ------------------------------------------------------------- */
.ds-chip {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font:600 var(--fs-xs)/1 var(--font-body); letter-spacing:.02em;
  padding:.4rem .7rem; border-radius:var(--r-pill);
  background:var(--brand-soft); color:var(--brand); border:1px solid var(--brand-soft-2);
}
.ds-chip--accent { background:var(--c-mint-100); color:var(--c-mint-600); border-color:transparent; }

/* Section rhythm ----------------------------------------------------------- */
.ds-section { padding-block: var(--sp-12); }
.ds-section--tight { padding-block: var(--sp-9); }

/* Accessibility ------------------------------------------------------------ */
:where(a,button,input,select,textarea):focus-visible { outline:none; box-shadow: var(--ring); border-radius: var(--r-xs); }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}