/* ==========================================================================
   ZAO Technology — Design Tokens (single source of truth)
   "Technical Blueprint / Field Notes" — warm paper, graphite ink,
   logo red + blue as the only two accents.
   ========================================================================== */

:root{
  /* --- Surfaces: warm paper / graphite ------------------------------------ */
  --paper:      #F4F1EA;   /* base page */
  --paper-2:    #ECE8DE;   /* raised panels / cards */
  --paper-3:    #E3DED2;   /* insets, code, wells */
  --ink:        #14171A;   /* primary text */
  --ink-2:      #3C434B;   /* secondary text */
  --ink-3:      #6B7480;   /* muted / captions / labels */
  --line:       rgba(20,23,26,.14);   /* hairlines / blueprint grid */
  --line-2:     rgba(20,23,26,.28);   /* stronger rules, crosshairs */

  /* --- Thermal accents: red = HEAT, blue = COLD (a temperature scale, not
     decoration). Pulled from the logo (red top / blue bottom). --------------- */
  --red:        #D42B1C;   /* hot */
  --red-ink:    #A81f13;   /* hot text on paper (AA) */
  --blue:       #1D4ED8;   /* cold */
  --blue-ink:   #1B3F9E;   /* cold text on paper (AA) */
  --amber:      #E8A22B;   /* warm mid — the diagonal in the mark, radiant glow */
  --tint-red:   rgba(212,43,28,.10);
  --tint-blue:  rgba(29,78,216,.10);

  /* Thermal ramp: cold -> warm -> hot. Used for the flowing heat + gradients. */
  --thermal: linear-gradient(90deg, #1D4ED8 0%, #5B8DE8 18%, #E8A22B 62%, #D42B1C 100%);
  --thermal-v: linear-gradient(0deg, #D42B1C 0%, #E8A22B 40%, #5B8DE8 78%, #1D4ED8 100%);
  --heat-glow: radial-gradient(120% 80% at 50% 118%, rgba(232,120,40,.34) 0%, rgba(212,43,28,.12) 34%, transparent 66%);

  /* semantic aliases so components read cleanly */
  --bg:         var(--paper);
  --surface:    var(--paper-2);
  --text:       var(--ink);
  --muted:      var(--ink-3);
  --border:     var(--line);
  --accent:     var(--red);

  /* --- Type --------------------------------------------------------------- */
  --f-display:  'Bricolage Grotesque', 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:     'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:     'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  /* Fluid, clamp-based type scale — one scale reused everywhere */
  --step--2: clamp(.72rem, .70rem + .08vw, .78rem);
  --step--1: clamp(.83rem, .80rem + .16vw, .92rem);
  --step-0:  clamp(1rem,   .96rem + .24vw, 1.14rem);
  --step-1:  clamp(1.22rem, 1.10rem + .58vw, 1.6rem);
  --step-2:  clamp(1.55rem, 1.28rem + 1.15vw, 2.25rem);
  --step-3:  clamp(2.0rem,  1.55rem + 2.1vw, 3.35rem);
  --step-4:  clamp(2.6rem,  1.85rem + 3.7vw, 4.9rem);
  --step-5:  clamp(3.1rem,  2.0rem + 5.2vw, 6.4rem);

  /* --- Spacing scale ------------------------------------------------------ */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2.5rem; --sp-5:4rem; --sp-6:6rem; --sp-7:9rem;

  /* --- Shape / structure — one decision, blueprint-sharp ------------------ */
  --radius:     2px;       /* near-sharp everywhere; no rounded/sharp drift */
  --radius-lg:  4px;
  --maxw:       1160px;    /* content column */
  --gutter:     clamp(1.1rem, 4vw, 3rem);
  --nav-h:      68px;

  /* --- Elevation (soft, paper-appropriate, never neon glow) --------------- */
  --shadow-1: 0 1px 0 var(--line), 0 1px 2px rgba(20,23,26,.05);
  --shadow-2: 0 1px 0 var(--line), 0 8px 24px -12px rgba(20,23,26,.22);
  --shadow-3: 0 2px 0 var(--line), 0 24px 60px -24px rgba(20,23,26,.32);

  /* --- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .55s;

  color-scheme: light;
}

/* ==========================================================================
   Theme: PCB / bench — the marketing pages (home) live in the product's real
   material world: dark lab bench, blue solder mask, copper traces, ENIG gold
   pads, silkscreen white. The ZAO logo IS this palette (red LED / gold
   diagonal / blue mask). Docs & guides intentionally stay on the light
   datasheet theme — documents look like documents.
   ========================================================================== */
body.theme-pcb{
  --bench:      #0D1114;   /* lab bench dark — warm, not pure black */
  --paper:      #0D1114;
  --paper-2:    #131920;
  --paper-3:    #1B232C;
  --ink:        #E9EDF1;   /* silkscreen white */
  --ink-2:      #B9C3CD;
  --ink-3:      #7E8994;
  --line:       rgba(233,237,241,.10);
  --line-2:     rgba(233,237,241,.22);

  --copper:     #C77B3F;   /* copper traces */
  --enig:       #D9A93F;   /* gold-plated pads = logo amber */
  --led:        #E23A2B;   /* status LED = logo red */
  --mask-blue:  #3B6FE0;   /* solder mask = logo blue, lifted for dark bg */

  --red:        var(--led);
  --red-ink:    #F0604F;   /* red text on dark (AA) */
  --blue:       var(--mask-blue);
  --blue-ink:   #7C9FEA;   /* blue text on dark (AA) */
  --amber:      var(--enig);
  --tint-red:   rgba(226,58,43,.14);
  --tint-blue:  rgba(59,111,224,.14);

  /* thermal ramp reinterpreted as signal ramp: mask blue -> gold -> copper -> LED */
  --thermal: linear-gradient(90deg, #3B6FE0 0%, #D9A93F 48%, #C77B3F 72%, #E23A2B 100%);
  --heat-glow: radial-gradient(120% 80% at 50% 118%, rgba(199,123,63,.20) 0%, rgba(226,58,43,.07) 36%, transparent 66%);

  --shadow-1: 0 1px 0 rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 1px 0 rgba(0,0,0,.5), 0 10px 28px -12px rgba(0,0,0,.6);
  --shadow-3: 0 2px 0 rgba(0,0,0,.5), 0 26px 64px -24px rgba(0,0,0,.7);

  color-scheme: dark;
}