/* == tokens/colors.css == */
/* CarEngineering — color tokens (dark-first, premium automotive) */
:root {
  /* ---- Ink / neutral ramp (near-black surfaces up to white) ---- */
  --black:    #000000;
  --ink-900:  #060809;  /* page background (faint cool cast) */
  --ink-850:  #0A0D0F;
  --ink-800:  #0F1315;  /* base surface / card */
  --ink-750:  #14181B;
  --ink-700:  #191E22;  /* raised surface */
  --ink-600:  #22282D;  /* hover surface */
  --ink-500:  #2C343A;  /* strong divider */
  --ink-400:  #3E474E;
  --ink-300:  #5B656D;
  --ink-250:  #79838B;  /* muted text — lightest value that still clears WCAG AA (4.83:1 on --bg-surface) */
  --ink-200:  #8B949D;  /* secondary text */
  --ink-150:  #A9B2BB;
  --ink-100:  #C6CDD4;  /* muted-bright text */
  --ink-050:  #E9ECEF;  /* primary text on dark */
  --white:    #FFFFFF;

  /* ---- Electric cyan accent (matches CARENGINEERING site) ---- */
  --cyan-050: #E7FCFF;
  --cyan-100: #C1F4FA;
  --cyan-200: #92EAF3;
  --cyan-300: #5FDDEC;
  --cyan-400: #34D2E5;  /* bright / hover / headline cyan */
  --cyan-500: #1FC3D8;  /* primary accent */
  --cyan-600: #12A2B7;
  --cyan-700: #0C7C8D;
  --cyan-glow: rgba(31, 195, 216, 0.45);
  --cyan-tint: rgba(31, 195, 216, 0.12);

  /* ---- Semantic signals ---- */
  --green-500: #2FBF71;
  --amber-500: #E9A400;
  --red-500:   #E5484D;

  /* ---- Semantic aliases (use these in components) ---- */
  --bg-page:        var(--ink-900);
  --bg-page-alt:    var(--ink-850);
  --bg-surface:     var(--ink-800);
  --bg-raised:      var(--ink-700);
  --bg-hover:       var(--ink-600);
  --bg-inverse:     var(--ink-050);

  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-subtle:   rgba(255, 255, 255, 0.12);
  --border-strong:   rgba(255, 255, 255, 0.20);
  --border-accent:   var(--cyan-500);

  --text-primary:   var(--ink-050);
  --text-secondary: var(--ink-200);
  --text-muted:     var(--ink-250);
  --text-inverse:   var(--ink-900);
  --text-accent:    var(--cyan-400);

  --accent:          var(--cyan-500);
  --accent-hover:    var(--cyan-400);
  --accent-press:    var(--cyan-600);
  --accent-contrast: #04171B; /* dark ink — cyan is a light accent, text on it is dark */
  --accent-tint:     var(--cyan-tint);

  --focus-ring: var(--cyan-400);
}


/* == tokens/typography.css == */
/* CarEngineering — typography tokens */
:root {
  /* Families
     display  — Saira: wide technical grotesque, echoes the wordmark; headlines
     eyebrow  — Chakra Petch: cut-corner technical face for kickers/labels/specs
     body     — Sora: clean geometric sans for running text + UI */
  --font-display: "Saira", "Arial Narrow", system-ui, sans-serif;
  --font-eyebrow: "Chakra Petch", "Saira", monospace;
  --font-body:    "Sora", system-ui, -apple-system, sans-serif;

  /* Type scale (px) */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base:16px;
  --text-md:  18px;
  --text-lg:  20px;
  --text-xl:  24px;
  --text-2xl: 32px;
  --text-3xl: 42px;
  --text-4xl: 56px;
  --text-5xl: 72px;
  --text-6xl: 100px;

  /* Line height */
  --leading-none:    1;
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.14em;
  --tracking-widest:  0.24em;  /* eyebrows / stencil feel */

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;
}


/* == tokens/spacing.css == */
/* CarEngineering — spacing, radius, elevation, motion tokens */
:root {
  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 200px;

  /* Radius — restrained, technical (sharp-leaning) */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-pill: 999px;

  /* Layout */
  --container:      1200px;
  --container-wide: 1360px;
  --gutter:         24px;
  --section-y:      var(--space-9);

  /* Elevation — on dark this is border + shadow + optional glow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.55);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-lg: 0 30px 70px rgba(0,0,0,0.55);
  --glow-accent: 0 0 0 1px rgba(31,195,216,0.55), 0 10px 44px rgba(31,195,216,0.35);
  --glow-soft:   0 0 40px rgba(31,195,216,0.18);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-med:  240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}


/* == tokens/base.css == */
/* CarEngineering — minimal element defaults (dark-first) */
:root { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Reusable eyebrow / kicker utility */
.ce-eyebrow {
  font-family: var(--font-eyebrow);
  font-size: var(--text-xs);
  font-weight: var(--weight-500, 500);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-accent);
}


/* == styles.css == */
/* CarEngineering Design System — global entry point.
   Consumers link ONLY this file. Keep it @import lines only. */
@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/base.css";