/* ============================================================================
   ATMS DESIGN SYSTEM — colors_and_type.css
   Automotive Technology and Measurement Sensor Ltd.
   B2B power-electronics & EV-charging hardware. Engineering-grade corporate.
   ----------------------------------------------------------------------------
   Fonts are loaded from Google Fonts (see FONT NOTE in README.md). These are
   substitutes chosen to match the embedded brand fonts in the source profile
   deck — confirm/replace with the official ATMS typefaces when available.
   ========================================================================== */

/* Primary brand typeface: Roboto (used in the source profile). */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

/* Self-hosted fonts (./fonts/*.woff2) — works offline & in sandboxed previews.
   These are open-source substitutes for the brand's embedded typefaces; see the
   FONT NOTE in README.md. Replace with official ATMS fonts when provided.
   Paths are relative to this CSS file's location (design-system root). */
@font-face { font-family:'Saira'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/saira-400.woff2') format('woff2'); }
@font-face { font-family:'Saira'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/saira-600.woff2') format('woff2'); }
@font-face { font-family:'Saira'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/saira-700.woff2') format('woff2'); }
@font-face { font-family:'Saira'; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/saira-800.woff2') format('woff2'); }
@font-face { font-family:'Saira Semi Condensed'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/saira-semicond-700.woff2') format('woff2'); }
@font-face { font-family:'Saira Semi Condensed'; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/saira-semicond-800.woff2') format('woff2'); }
@font-face { font-family:'Saira Stencil One'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/saira-stencil-one-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/barlow-700.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/jetbrains-mono-700.woff2') format('woff2'); }

:root {
  /* ---------------------------------------------------------------- COLOR */
  /* Brand core — deep corporate navy → azure → electric cyan tech accent.
     Derived from sampled cover/circuit imagery in the source deck. */

  /* Navy scale (dark surfaces, hero backgrounds, deck dividers) */
  --atms-navy-900: #07172E;   /* deepest — near-black blue */
  --atms-navy-800: #0B1C3F;   /* primary dark surface */
  --atms-navy-700: #102A52;
  --atms-navy-600: #163A68;

  /* Brand blue (primary) */
  --atms-blue-700: #184E86;
  --atms-blue-600: #1F5C9E;   /* PRIMARY brand azure */
  --atms-blue-500: #2A6FB0;
  --atms-blue-400: #4A8AC8;

  /* Electric cyan (tech accent — circuitry highlights, data, active states) */
  --atms-cyan-600: #0E7C94;
  --atms-cyan-500: #1296C2;
  --atms-cyan-400: #16A6DB;   /* ACCENT */
  --atms-cyan-300: #56C5E8;
  --atms-cyan-100: #D3EEF8;

  /* Neutrals (cool gray, technical) */
  --atms-ink:      #111922;   /* primary text on light */
  --atms-graphite: #2B3641;
  --atms-slate:    #4A5563;   /* secondary text */
  --atms-muted:    #8A98A8;   /* tertiary / captions */
  --atms-border:   #DCE3EA;   /* hairline borders */
  --atms-line:     #EAEFF4;   /* subtle dividers */
  --atms-surface:  #F4F7FA;   /* light section background */
  --atms-panel:    #FFFFFF;   /* cards / panels */
  --atms-white:    #FFFFFF;

  /* Semantic (status — used in spec/compliance/monitoring UI) */
  --atms-ok:    #1F9D6B;      /* pass / charging ok */
  --atms-warn:  #E0992B;      /* warning threshold */
  --atms-fault: #D8443C;      /* fault / over-limit */
  --atms-info:  var(--atms-cyan-400);

  /* Functional aliases */
  --fg1: var(--atms-ink);       /* primary foreground */
  --fg2: var(--atms-slate);     /* secondary foreground */
  --fg3: var(--atms-muted);     /* tertiary foreground */
  --fg-on-dark:  #EAF1F8;       /* primary text on navy */
  --fg-on-dark2: #9FB4CB;       /* secondary text on navy */
  --bg1: var(--atms-white);
  --bg2: var(--atms-surface);
  --bg-dark: var(--atms-navy-800);
  --accent: var(--atms-blue-600);
  --accent-2: var(--atms-cyan-400);

  /* ----------------------------------------------------------------- TYPE */
  /* Primary typeface: Roboto (the face used in the source ATMS profile).
     Loaded from Google Fonts above; system/self-hosted fallbacks keep it
     legible offline or where Roboto isn't installed. */
  --font-geo:     'Roboto', system-ui, -apple-system, 'Saira', sans-serif;
  --font-stencil: 'Saira Stencil One', 'Saira', sans-serif;   /* legacy display accent — logo now uses the real wordmark image */
  --font-display: var(--font-geo);
  --font-cond:    var(--font-geo); /* big numerals */
  --font-body:    var(--font-geo);
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;   /* part #s, specs */

  /* Weights */
  --w-light: 300;   /* @kind font */
  --w-reg:   400;   /* @kind font */
  --w-med:   500;   /* @kind font */
  --w-semi:  600;   /* @kind font */
  --w-bold:  700;   /* @kind font */
  --w-black: 800;   /* @kind font */

  /* Type scale (rem @16px base). Display uses Saira; body uses Barlow. */
  --t-display:  clamp(2.6rem, 5.2vw, 4.25rem); /* @kind font */
  --t-h1: 2.5rem;     /* 40 */
  --t-h2: 2rem;       /* 32 */
  --t-h3: 1.5rem;     /* 24 */
  --t-h4: 1.25rem;    /* 20 */
  --t-lead: 1.1875rem;/* 19 lead paragraph */
  --t-body: 1rem;     /* 16 */
  --t-sm: 0.875rem;   /* 14 */
  --t-xs: 0.75rem;    /* 12 caption */
  --t-eyebrow: 0.8125rem;

  --lh-tight: 1.05;   /* @kind font */
  --lh-snug: 1.2;     /* @kind font */
  --lh-normal: 1.5;   /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Eyebrow / label letter-spacing — the deck uses wide-tracked uppercase
     labels e.g. "P R O F E S S I O N A L   C O R P O R A T E". */
  --track-eyebrow: 0.28em; /* @kind font */
  --track-label: 0.14em;   /* @kind font */
  --track-tight: -0.01em;  /* @kind font */

  /* ------------------------------------------------------- SPACE / RADIUS */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  --r-xs: 3px;  --r-sm: 6px;  --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --r-pill: 999px;

  /* Borders — ATMS leans on crisp 1px hairlines, not heavy strokes */
  --bw: 1px;
  --border-hair: 1px solid var(--atms-border);
  --border-strong: 1.5px solid var(--atms-graphite);

  /* ---------------------------------------------------------- ELEVATION */
  /* Restrained, cool-tinted shadows. Cards are flat with hairline borders;
     elevation is reserved for overlays/menus. */
  --sh-1: 0 1px 2px rgba(11,28,63,0.06);
  --sh-2: 0 2px 8px rgba(11,28,63,0.08);
  --sh-3: 0 8px 24px rgba(11,28,63,0.10);
  --sh-4: 0 18px 48px rgba(7,23,46,0.18);
  --sh-focus: 0 0 0 3px rgba(22,166,219,0.35);

  /* Motion — quick, mechanical, no bounce. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur: 200ms;       /* @kind other */
  --dur-slow: 360ms;  /* @kind other */
}

/* ============================ SEMANTIC ELEMENT STYLES ===================== */
.atms-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--atms-cyan-500);
}
.atms-h1, .atms-display {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg1);
}
.atms-display { font-size: var(--t-display); }
.atms-h1 { font-size: var(--t-h1); }
.atms-h2 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-h2); line-height: var(--lh-snug); color: var(--fg1); }
.atms-h3 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-h3); line-height: var(--lh-snug); color: var(--fg1); }
.atms-h4 { font-family: var(--font-display); font-weight: var(--w-semi); font-size: var(--t-h4); line-height: var(--lh-snug); color: var(--fg1); }
.atms-lead { font-family: var(--font-body); font-weight: var(--w-reg); font-size: var(--t-lead); line-height: var(--lh-relaxed); color: var(--fg2); }
.atms-body { font-family: var(--font-body); font-weight: var(--w-reg); font-size: var(--t-body); line-height: var(--lh-relaxed); color: var(--fg2); }
.atms-sm { font-family: var(--font-body); font-size: var(--t-sm); line-height: var(--lh-normal); color: var(--fg2); }
.atms-caption { font-family: var(--font-body); font-size: var(--t-xs); color: var(--fg3); }
.atms-spec { font-family: var(--font-mono); font-size: var(--t-sm); letter-spacing: -0.01em; color: var(--fg1); font-variant-numeric: tabular-nums; }
.atms-section-num {
  font-family: var(--font-cond);
  font-weight: var(--w-black);
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.9;
  color: var(--atms-cyan-400);
}

/* Logo lockup — the real ATMS wordmark, extracted from the company profile PDF.
   Apply to an <img>:  <img class="atms-logo" src="assets/atms-logo-ink.png">
   On dark surfaces use the white asset (atms-logo-white.png) or .atms-logo--light. */
.atms-logo {
  height: 28px;
  width: auto;
  display: inline-block;
}
.atms-logo--light { content: url(assets/atms-logo-white.png); }