/* Sussex Audio — Color tokens
   An editor-clean black/white frame interrupted by oversized hand-cut pastel blocks.
   The chrome is rigorously monochrome; story sections drop into a saturated panel.
   FreqKey adds one signature device the parent brand lacks: the rainbow frequency
   spectrum — used as a hairline/stroke accent, never as a fill behind text. */

:root {
  /* ---- Base ink & canvas ---- */
  --black: #000000;
  --white: #ffffff;
  --charcoal: #2e2e30;        /* the Sussex dog silhouette ink */

  /* ---- Hairlines & soft surfaces ---- */
  --hairline: #e6e6e6;        /* 1px borders: inputs, cards, dividers */
  --hairline-soft: #f1f1f1;   /* subtler: table rows, footer rules */
  --surface-soft: #f7f7f5;    /* off-white tiles: icon btns, template cards */

  /* ---- Hand-cut pastel blocks (story sections) ---- */
  --block-lime:  #dceeb1;     /* signature: systems / FAQ / contact */
  --block-lilac: #c5b0f4;     /* design hero, highlight sections */
  --block-cream: #f4ecd6;     /* warm: hero strips, template grids */
  --block-pink:  #efd4d4;     /* soft pastel section */
  --block-mint:  #c8e6cd;     /* pastel section */
  --block-coral: #f3c9b6;     /* "ship / make" story block */
  --block-navy:  #1f1d3d;     /* deep indigo — the only dark block above footer */

  /* ---- Accent (use scarcely) ---- */
  --accent-magenta: #ff3d8b;  /* one promo CTA per page, max */

  /* ---- FreqKey spectrum (signature, FreqKey product only) ---- */
  --spec-violet: #8b3df0;
  --spec-blue:   #4f5bf5;
  --spec-cyan:   #18c8e6;
  --spec-green:  #6fd24a;
  --spec-yellow: #f4c020;
  --spec-orange: #f78a1e;
  --spec-red:    #ee3b2b;
  --spectrum: linear-gradient(90deg,
    var(--spec-violet) 0%, var(--spec-blue) 18%, var(--spec-cyan) 36%,
    var(--spec-green) 54%, var(--spec-yellow) 72%, var(--spec-orange) 86%,
    var(--spec-red) 100%);

  /* ---- Semantic ---- */
  --success: #1ea64a;         /* comparison checkmarks — glyph fill, not a surface */
  --scrim: rgba(0,0,0,0.6);   /* modal / lightbox backdrop */
  --on-inverse-soft: rgba(255,255,255,0.16); /* translucent icon-btn on dark */

  /* ================= Semantic aliases ================= */
  --ink: var(--black);             /* all type on light surfaces */
  --ink-inverse: var(--white);     /* type on dark surfaces */
  --canvas: var(--white);          /* default page background */
  --canvas-inverse: var(--black);  /* footer, marquee strip */

  --primary: var(--black);         /* every primary CTA, selected state */
  --on-primary: var(--white);

  --border: var(--hairline);
  --border-soft: var(--hairline-soft);
  --surface: var(--surface-soft);
}