/* TEKKAGAN SAFETY — bundled stylesheet (self-contained for deployment)
   Fonts: Outfit (display, free OFL match for Quinoa) + Poppins + IBM Plex Mono, via Google Fonts. */


/* ===== tokens/fonts.css ===== */
/* ============================================================
   TEKKAGAN SAFETY — Webfonts
   ------------------------------------------------------------
   DISPLAY / BRAND FACE: Quinoa (Latinotype, commercial). We do
   NOT ship the licensed Quinoa files, so the display face is
   served by "Outfit" — the closest FREE (OFL) geometric match
   (same rounded geometric skeleton, full 100–900 weights).
   The brand wordmark itself is the real logo art (assets/brand/),
   so it is unaffected by this substitution.

   >>> To use the real Quinoa in production: add its @font-face
       block below (family name 'Quinoa') AND prepend 'Quinoa'
       to --font-display in typography.css. It then takes over
       everywhere; remove it to fall back to Outfit.

   BODY + UI: Poppins (matches tekkagan.com). TECHNICAL: IBM Plex
   Mono for spec codes, DOSH/SIRIM ratings, SKUs.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---- Licensed Quinoa drop-in (production) -----------------
   Uncomment and point src at the licensed files to override the
   free substitute. Nothing else needs to change.

@font-face {
  font-family: 'Quinoa';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/Quinoa-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Quinoa';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('../assets/fonts/Quinoa-Ultrabold.otf') format('opentype');
}
@font-face {
  font-family: 'Quinoa';
  font-style: normal; font-weight: 900; font-display: swap;
  src: url('../assets/fonts/Quinoa-Black.otf') format('opentype');
}
------------------------------------------------------------ */


/* ===== tokens/colors.css ===== */
/* ============================================================
   TEKKAGAN SAFETY — Color tokens
   ------------------------------------------------------------
   Confirmed brand colors (from the official logo .ai/PDF):
     Signal Red    #E82727   (the logo mark red — authoritative)
     Ink Black     #0A0A0A
     Paper White   #EFEEE8  (warm off-white)

   NOTE: an earlier verbal value of #EF0606 was superseded by the
   actual logo art, which uses #E82727 across both brand PDFs.
   The red ramp is derived to stay harmonious with the logo red.
   ============================================================ */

:root {
  /* ---- Brand anchors -------------------------------------- */
  --red:        #E82727;   /* Signal Red — from the logo mark    */
  --ink:        #0A0A0A;   /* Ink Black — text, dark surfaces      */
  --paper:      #EFEEE8;   /* Paper White — default page surface   */

  /* ---- Signal Red ramp ------------------------------------ */
  --red-50:   #FDECEC;
  --red-100:  #FAD0D0;
  --red-200:  #F4A6A6;
  --red-300:  #ED7373;
  --red-400:  #EC4B4B;
  --red-500:  #E82727;   /* = --red (logo red) */
  --red-600:  #C81F1F;   /* hover / pressed */
  --red-700:  #A11A1A;   /* deep, on light */
  --red-800:  #7C1515;
  --red-900:  #551010;

  /* ---- Warm neutral ramp (Stone) -------------------------- */
  /* Runs from Paper White down to Ink Black, kept slightly warm */
  --stone-50:   #F7F6F1;
  --stone-100:  #EFEEE8;   /* = --paper */
  --stone-200:  #E2E0D6;
  --stone-300:  #CDCABC;
  --stone-400:  #A8A496;
  --stone-500:  #7C7869;
  --stone-600:  #565248;
  --stone-700:  #393630;
  --stone-800:  #20201C;
  --stone-900:  #0A0A0A;   /* = --ink */

  /* ---- Semantic (inferred) -------------------------------- */
  --green-500:  #2F7D46;   /* compliant / in-stock / success     */
  --green-600:  #266338;
  --amber-500:  #E6A100;   /* caution / pending — also hi-vis cue */
  --amber-600:  #B97F00;
  --hivis:      #E8FF00;   /* high-visibility accent (use sparingly) */
  --blue-500:   #2A6FDB;   /* informational only */

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not the
     raw ramps above.
     ============================================================ */

  /* Surfaces */
  --surface-page:      var(--paper);
  --surface-raised:    #FBFAF6;   /* cards on paper, a touch lighter */
  --surface-sunken:    var(--stone-200);
  --surface-inverse:   var(--ink);
  --surface-inverse-2: var(--stone-800);

  /* Text */
  --text-strong:    var(--ink);
  --text-body:      var(--stone-700);
  --text-muted:     var(--stone-500);
  --text-faint:     var(--stone-400);
  --text-on-red:    var(--paper);
  --text-on-ink:    var(--paper);
  --text-inverse:   var(--paper);

  /* Brand / action */
  --action:          var(--red);
  --action-hover:    var(--red-600);
  --action-pressed:  var(--red-700);
  --action-tint:     var(--red-50);

  /* Lines & borders */
  --border-subtle:   rgba(10, 10, 10, 0.10);
  --border-default:  rgba(10, 10, 10, 0.18);
  --border-strong:   var(--ink);
  --border-inverse:  rgba(239, 238, 232, 0.16);

  /* Focus ring */
  --focus-ring:      rgba(232, 39, 39, 0.40);

  /* Status */
  --status-success:        var(--green-500);
  --status-success-tint:   #E6F0E8;
  --status-warning:        var(--amber-500);
  --status-warning-tint:   #FBF0D6;
  --status-danger:         var(--red-600);
  --status-danger-tint:    var(--red-50);
  --status-info:           var(--blue-500);
  --status-info-tint:      #E5EEFB;
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   TEKKAGAN SAFETY — Typography tokens
   ------------------------------------------------------------
   Display / headings: Quinoa (brand) — substituted by the free
   OFL face "Outfit" until licensed Quinoa is added. Body + UI:
   Poppins (matches tekkagan.com). Technical: IBM Plex Mono.

   Voice is strong + minimal: tight, heavy display set in UPPER-
   CASE for hero / section labels; sentence-case for everything
   readable.
   ============================================================ */

:root {
  /* ---- Families ------------------------------------------- */
  --font-display: 'Outfit', 'Poppins', system-ui, sans-serif;
  --font-sans:    'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Weights -------------------------------------------- */
  --fw-regular:   400;       /* @kind font */
  --fw-medium:    500;       /* @kind font */
  --fw-semibold:  600;       /* @kind font */
  --fw-bold:      700;       /* @kind font */
  --fw-extrabold: 800;       /* @kind font */
  --fw-black:     900;       /* @kind font */

  /* ---- Type scale (1.250 major-third, 16px base) ---------- */
  --text-2xs:   0.6875rem;  /* 11px — micro labels, legal       */
  --text-xs:    0.75rem;    /* 12px — captions, spec codes      */
  --text-sm:    0.875rem;   /* 14px — secondary UI              */
  --text-base:  1rem;       /* 16px — body                      */
  --text-lg:    1.125rem;   /* 18px — lead body                 */
  --text-xl:    1.375rem;   /* 22px                             */
  --text-2xl:   1.75rem;    /* 28px — card / section titles     */
  --text-3xl:   2.25rem;    /* 36px                             */
  --text-4xl:   3rem;       /* 48px — page titles               */
  --text-5xl:   4rem;       /* 64px — hero                      */
  --text-6xl:   5.5rem;     /* 88px — oversized display         */

  /* ---- Line heights --------------------------------------- */
  --leading-none:    1;
  --leading-tight:   1.08;   /* display */
  --leading-snug:    1.25;   /* headings */
  --leading-normal:  1.55;   /* body */
  --leading-relaxed: 1.7;

  /* ---- Letter spacing ------------------------------------- */
  --tracking-tightest: -0.03em;  /* big display */
  --tracking-tight:    -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.12em;    /* uppercase eyebrows / labels */
  --tracking-widest:   0.2em;     /* spaced caps badges */

  /* ---- Semantic roles ------------------------------------- */
  --display-font:    var(--font-display);
  --display-weight:  var(--fw-extrabold);
  --display-tracking: var(--tracking-tightest);

  --eyebrow-font:    var(--font-sans);
  --eyebrow-weight:  var(--fw-bold);
  --eyebrow-tracking: var(--tracking-wider);
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   TEKKAGAN SAFETY — Spacing & layout tokens
   ------------------------------------------------------------
   4px base grid. Strong / engineered feel: generous section
   rhythm, tight component padding.
   ============================================================ */

:root {
  --space-0:   0;
  --space-1:   0.25rem;   /* 4  */
  --space-2:   0.5rem;    /* 8  */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-8:   2rem;      /* 32 */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 */
  --space-16:  4rem;      /* 64 */
  --space-20:  5rem;      /* 80 */
  --space-24:  6rem;      /* 96 */
  --space-32:  8rem;      /* 128 */

  /* Layout */
  --container-max:    1240px;
  --container-narrow: 760px;
  --gutter:           clamp(1.25rem, 4vw, 4rem);  /* @kind spacing */
  --section-y:        clamp(4rem, 9vw, 8rem);      /* @kind spacing */
}


/* ===== tokens/elevation.css ===== */
/* ============================================================
   TEKKAGAN SAFETY — Elevation: radii, borders, shadows
   ------------------------------------------------------------
   The brand reads "engineered, not soft." Radii are small and
   purposeful. Shadows are crisp and low-spread (think stamped
   steel / printed spec sheet), never blurry glows.
   ============================================================ */

:root {
  /* ---- Radii ---------------------------------------------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;    /* default: buttons, inputs, tags */
  --radius-md:   6px;    /* cards */
  --radius-lg:   10px;   /* large panels */
  --radius-pill: 999px;  /* badges / chips only */

  /* ---- Border widths -------------------------------------- */
  --border-1: 1px;       /* @kind other */
  --border-2: 2px;       /* @kind other */       /* emphasis / focus outlines */

  /* ---- Shadows (crisp, low) ------------------------------- */
  --shadow-xs:  0 1px 0 rgba(10,10,10,0.05);
  --shadow-sm:  0 1px 2px rgba(10,10,10,0.08), 0 1px 1px rgba(10,10,10,0.04);
  --shadow-md:  0 2px 6px rgba(10,10,10,0.08), 0 1px 2px rgba(10,10,10,0.06);
  --shadow-lg:  0 12px 28px rgba(10,10,10,0.12), 0 2px 6px rgba(10,10,10,0.06);
  --shadow-inset: inset 0 1px 2px rgba(10,10,10,0.10);

  /* Hard "stamped" edge — used on primary CTAs for a physical feel */
  --shadow-stamp: 0 2px 0 var(--red-700);
  --shadow-stamp-ink: 0 2px 0 var(--stone-900);

  /* ---- 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 */
  --dur-fast:   120ms;   /* @kind other */
  --dur-base:   180ms;   /* @kind other */
  --dur-slow:   320ms;   /* @kind other */
}


/* ===== tokens/base.css ===== */
/* ============================================================
   TEKKAGAN SAFETY — Base element styling
   Light reset + sensible brand defaults. Optional for consumers
   but keeps specimens and kits consistent.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-tightest); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin: 0; text-wrap: pretty; }

a { color: var(--action); text-decoration: none; }
a:hover { color: var(--action-hover); }

/* Eyebrow / spec label utility used across kits and specimens */
.tk-eyebrow {
  font-family: var(--eyebrow-font);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--action);
}

::selection { background: var(--red); color: var(--paper); }

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