/* HildiTech theme: THIS SITE's colors, fonts and geometry. The only place they are
   defined. The shared CSS, pages and scripts use these tokens and no raw colors; a
   cloned site replaces this file (with the rest of site/brand/).

   Naming:
   - Page tokens (--bg, --text, --ink-rgb...) are for the page body.
   - --chrome-* tokens are for the header, footer and home hero. On HildiTech they
     equal the page ones (everything is dark); a light site can keep dark chrome.
   - *-rgb tokens are "r,g,b" for translucent use: rgba(var(--accent-rgb), 0.15).
   - --ink-rgb is the colour of text on the page, used for soft text, hairlines and
     overlays at low alpha (white on this dark site; dark on a light one).
   - --on-accent is text on accent/success fills (buttons, badges).            */

:root {
  /* ── Page surfaces ─────────────────────────────────────────────── */
  --bg:            #07101F;   --bg-rgb:  7,16,31;
  --bg-2:          #0A1628;   /* raised band: dropdowns, alternate sections */
  --surface:       #0D1C32;   /* wells, inputs, image frames */
  --surface-2:     #112240;   /* image well behind article/guide heroes */
  --surface-deep:  #071828;   /* gradient end on About */
  --card:          #0F1E35;
  --hover-bg:      #0F1E35;   /* icon-button hover */

  /* ── Ink on the page ───────────────────────────────────────────── */
  --text:          #E8EDF5;   --text-rgb: 232,237,245;
  --text-2:        #A8B8CC;
  --text-3:        #C5D0E0;
  --text-strong:   #FFFFFF;   /* headings / emphasis */
  --muted:         #5A7090;
  --muted-2:       #3A4A60;
  --ink-rgb:       255,255,255;
  --border:        rgba(58,143,255,0.15);
  --border-2:      rgba(255,255,255,0.08);

  /* ── Accent ────────────────────────────────────────────────────── */
  --accent:        #3A8FFF;   --accent-rgb: 58,143,255;
  --accent-soft:   rgba(58,143,255,0.12);
  --accent-2:      #5AADFF;   /* links, hover text */
  --accent-3:      #93C5FD;   /* pale accent text on a tinted chip */
  --accent-strong: #1E6FD9;   --accent-strong-rgb: 30,111,217;
  --on-accent:     #FFFFFF;
  --highlight:     #D4A815;   --highlight-rgb: 212,168,21;   /* gold: ratings, "our take" */
  --highlight-2:   #00C3FF;

  /* ── Status ────────────────────────────────────────────────────── */
  --success:        #10B981;  --success-rgb: 16,185,129;
  --success-2:      #34D399;
  --success-3:      #22C55E;  --success-3-rgb: 34,197,94;
  --success-strong: #059669;
  --success-deep:   #0D3A1A;
  --error:          #EF4444;  --error-rgb: 239,68,68;
  --error-2:        #F87171;
  --error-3:        #FCA5A5;
  --warn:           #F59E0B;  --warn-rgb: 245,158,11;
  --warn-2:         #FCD34D;
  --warn-3:         #FBBF24;  --warn-3-rgb: 251,191,36;
  --violet:         #A78BFA;  --violet-rgb: 139,92,246;
  --purple:         #C084FC;  --purple-rgb: 168,85,247;

  /* Light stock/source chips */
  --chip-success-bg:   #D1FAE5;  --chip-success-text: #065F46;
  --chip-warn-bg:      #FEF3C7;  --chip-warn-text:    #92400E;
  --chip-neutral-bg:   #F3F4F6;  --chip-neutral-text: #6B7280;

  /* Special-order notice/badge */
  --special-bg:    #1A1400;
  --special-edge:  #8B6914;
  --special-text:  #F5D77A;
  --special-muted: #BFA050;

  /* ── Chrome: header, footer, home hero ─────────────────────────── */
  --chrome-bg:          #07101F;
  --chrome-bg-rgb:      7,16,31;
  --chrome-bg-2:        #0A1628;
  --chrome-footer-bg:   #060A12;
  --chrome-text:        #E8EDF5;
  --chrome-text-2:      #A8B8CC;
  --chrome-text-strong: #FFFFFF;
  --chrome-muted:       #5A7090;
  --chrome-ink-rgb:     255,255,255;
  --chrome-border:      rgba(58,143,255,0.15);
  --chrome-hover-bg:    #0F1E35;

  /* ── Type ──────────────────────────────────────────────────────── */
  --font-body:     'Barlow', sans-serif;
  --font-display:  'Barlow Condensed', sans-serif;

  /* ── Geometry + depth ──────────────────────────────────────────── */
  --radius:      8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --shadow-rgb:  0,0,0;
  --shadow:      0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.6);

  /* Home category tiles: one hue per tile, in order (read by index.html) */
  --tile-hues:   190 220 210 240 230 200 250 180 260 170;
}