/* ============================================================
   Fortify Ecom — Color tokens
   Single-accent system. Teal is the only interactive color.
   Navy is the dark-surface + ink family. Everything else is
   a neutral surface used to create rhythm between tiles.
   ============================================================ */

:root {
  /* ---- Brand & Accent -------------------------------------
     Teal (#14b8a6, sampled from the logo arrow) is the single
     brand-level interactive color. Every link, pill CTA and
     focus ring roots here. There is no second brand color. */
  --color-primary:            #14b8a6; /* Action Teal — all CTAs, links, focus root */
  --color-primary-focus:      #16c2af; /* keyboard focus ring (2px outline) */
  --color-primary-on-dark:    #2dd4bf; /* brighter teal for links on dark navy tiles */
  --color-on-primary:         #ffffff; /* text/icon on a teal fill */

  /* ---- Surface --------------------------------------------
     White dominates. Parchment + pearl are near-white steps
     used only to create rhythm. Navy family = dark tiles. */
  --color-canvas:             #ffffff; /* dominant canvas */
  --color-canvas-parchment:   #f5f5f7; /* signature off-white; alternating light tiles + footer */
  --color-surface-pearl:      #fafafc; /* ghost-button fill, lighter than parchment */
  --color-surface-tile-1:     #0b1629; /* primary dark tile — brand navy */
  --color-surface-tile-2:     #0f1d34; /* micro-step lighter, for adjacent dark tiles */
  --color-surface-tile-3:     #091320; /* micro-step darker — bottom of stack, video frames */
  --color-surface-black:      #000000; /* true void — global nav bar, video backgrounds */
  --color-surface-chip:       #d2d2d7; /* base of translucent control chip over photography */
  --color-surface-chip-translucent: rgba(210, 210, 215, 0.64);

  /* ---- Text ------------------------------------------------ */
  --color-ink:                #0b1629; /* headlines, body, dark utility fill — brand navy */
  --color-body:               #0b1629; /* same tone; one near-navy for all light-surface text */
  --color-body-on-dark:       #ffffff; /* text on dark tiles + global nav */
  --color-body-muted:         #ccd2dd; /* secondary copy on dark tiles */
  --color-ink-muted-80:       #33455c; /* body on pearl surface — softer than ink */
  --color-ink-muted-48:       #7a8699; /* disabled text, legal fine-print */

  /* ---- Hairlines & Borders -------------------------------- */
  --color-divider-soft:       #f0f0f0; /* soft ring on secondary buttons (≈ rgba(0,0,0,.04)) */
  --color-hairline:           #e0e2e7; /* 1px hairline on utility cards + chips */

  /* ---- Focus ---------------------------------------------- */
  --focus-ring:               2px solid var(--color-primary-focus);
}