/* px-tokens.css: COPIED, do not edit here.
   Source: IntelliBotique/kiosk-by-sitecrafters @ 0ec4548, design-system/tokens/colors.css
   (the Kiosk px-* layer, the single token source for Kiosk and sitecrafters.studio,
   design alignment 10 Oct 2026). The two repos share no package, so this file is a
   verbatim copy: change the Kiosk file, then copy it here and update this commit id.
   Check: diff <(tail -n +8 px-tokens.css) <kiosk>/design-system/tokens/colors.css */

/* ============================================================
   KIOSK BY SITECRAFTERS · COLOR TOKENS (the px-* layer)

   The single token source for Kiosk AND sitecrafters.studio
   (design alignment, 10 Oct 2026). SiteCrafters copies this file
   and maps its own short names onto it; see the note at the end.

   Three layers, in order:
     1. Primitives: one name per value, named for what they hold.
     2. Legacy names: the Pickaxe-era names components still use
        (px-plum, px-blue...). Each points at a primitive; none
        holds a value of its own. Prefer the primitive in new work.
     3. Semantic aliases: what components should reach for.

   Discipline:
     • RED  = the sales and action color on Kiosk and SiteCrafters
              (START NOW, the After mark). Never an error or a stop.
     • NAVY = everyday interactivity (nav, links, active states).
     • GOLD = brass: metal on Kiosk, printed ink on SiteCrafters.
     • An error is a word and a cross (✕) in ink, never red.
     • Warm neutrals on light grounds; the cool mid is navy-only.
   ============================================================ */

:root {
  /* ---- 1. Primitives ---------------------------------------- */

  /* Ink and paper */
  --px-ink: #1C1A18;            /* charcoal: body ink on cream/white (15.15:1 on cream) */
  --px-white: #FFFFFF;
  --px-cream: #F5EFE3;          /* paper cream: page canvas, start card, light bands */
  --px-stone-100: #EBE3D2;      /* stone: pills, alt sections (SiteCrafters' cream-dk) */
  --px-mist: #F8F3E9;           /* top of the light pricing band gradient */
  --px-surface-1: #FBF7EF;      /* lightest app surface */
  --px-blue-tint: #F3EEE4;      /* warm tint behind tinted panels (name kept: app surface-tint) */
  --px-footer: #E7E1D2;         /* light marketing footer ground */
  --px-hairline: #E3D9C4;       /* hairline dividers on light grounds; never a control edge */
  --px-control-edge: #807B6F;   /* the edge of every field and outline control, both sites:
                                   3.68:1 on cream, 4.22:1 on white, 3.30:1 on stone-100,
                                   4.33:1 on navy-deep, 3.74:1 on navy, 3.28:1 on navy-mid */
  --px-text-muted: #6B6355;     /* warm mid: secondary text on light (5.18:1 on cream) */
  --px-text-faint: #6C655A;     /* warm faint: "(optional)", "or", track pills.
                                   Was #9A9080 (2.75:1 on cream); now 5.03:1 on cream,
                                   5.76:1 on white, 4.51:1 on stone-100 */
  --px-grey: #A89E8C;           /* warm grey: disabled fills (not text) */

  /* Navy */
  --px-navy: #182140;           /* ink navy: hero top, cards, links on light */
  --px-navy-mid: #1F2B50;       /* raised dark surface, card gradient top */
  --px-navy-lt: #2A3D6B;        /* light navy: borders/hover on dark; focus on light */
  --px-navy-deep: #0E1428;      /* the instrument page ground */
  --px-navy-abyss: #090D1C;     /* deepest ground: proof band, sign-in band, footer */
  --muted-on-dark: #98A0B8;     /* cool mid: muted text on NAVY only (7.01:1 on navy-deep) */

  /* Red: the sales color */
  --px-red: #C93828;            /* START NOW, the After tag, the seal, the dial needle */
  --px-red-warm: #CB3E29;       /* top stop of the START NOW gradient. Was #D64A36, where
                                   the on-red label measured 3.94:1; taken down in its own
                                   hue (7.5deg) by the smallest step that clears 4.5:1:
                                   on-red 4.53:1 here, 4.73 on red, 6.49 on red-deep. */
  --px-red-deep: #A62A1C;       /* gradient foot; hover of flat red buttons (white 7.07:1) */
  --px-red-text: #BB3425;       /* small red words on light grounds (5.05:1 on cream) */
  --px-red-text-dark: #D97266;  /* small red words on dark grounds (4.92:1 on navy) */

  /* Brass and sand */
  --px-gold: #C4924A;           /* brass fills, rules, the wordmark dot */
  --px-gold-hi: #EBCB86;        /* bright gold: gold text on navy, the focus ring on navy */
  --px-gold-deep: #9A7433;      /* foot of every gold gradient; not a text color on light */
  --px-brass-lo: #7A5A28;       /* gold as text on light grounds (gold-ink) */
  --px-sand: #D9C9A8;           /* italic lede, footer tagline, Before tag */

  /* Meaning */
  --px-success: #2E7D57;        /* the ✓ in pricing lists; the live dot */
  --px-success-bg: #CDEBD8;
  --px-error: var(--px-ink);    /* app errors: a word and a cross (✕) in ink, 17.35:1 on
                                   white. Was #A5342A: red is the sales color here. */
  --px-teal: #4FA8A6;           /* decorative only: the green window dot in the proof frame */

  /* ---- 2. Legacy names (point at primitives) ----------------- */
  --px-ink-soft: var(--px-ink);          /* was a second #1C1A18 */
  --px-plum: var(--px-navy);             /* named plum, always held navy */
  --px-blue: var(--px-navy);             /* named blue, always held navy */
  --px-blue-228: var(--px-navy);
  --px-blue-light: var(--px-navy-lt);
  --px-blue-lighter: var(--px-navy-lt);
  --px-blue-pill: var(--px-stone-100);
  --px-gold-pale: var(--px-gold-hi);     /* was a second #EBCB86 */
  --px-dark-blue: var(--px-navy-deep);
  --px-stone-50: var(--px-cream);
  --px-app-canvas: var(--px-cream);
  --px-card: var(--px-white);
  --px-border: var(--px-hairline);
  --px-sep: var(--px-hairline);
  --px-surface-2: var(--px-cream);
  --px-surface-3: var(--px-stone-100);
  --px-destructive: var(--px-error);
  --px-danger: var(--px-error);          /* components reach for --px-danger with a red fallback */
  /* Retired: --px-gold-strip-a / -b held red under a gold name (the lab now uses px-brass-lo). */

  /* ---- 3. Semantic aliases: prefer these in components -------- */

  /* Text */
  --text-strong: var(--px-ink);
  --text-body: var(--px-ink);
  --text-muted: var(--px-text-muted);
  --text-faint: var(--px-text-faint);
  --text-on-dark: var(--px-cream);        /* cream on navy (AAA), not pure white */
  --text-link: var(--px-navy);            /* links = navy */

  /* Surfaces */
  --surface-app: var(--px-cream);
  --surface-card: var(--px-white);
  --surface-marketing: var(--px-cream);
  --surface-marketing-alt: var(--px-stone-100);
  --surface-tint: var(--px-blue-tint);

  /* Lines, edges and focus */
  --border-hairline: var(--px-hairline);
  --border-divider: var(--px-hairline);
  --border-control: var(--px-control-edge);
  --focus-ring: var(--px-navy-lt);        /* on cream and white */
  --focus-ring-dark: var(--px-gold-hi);   /* on the navy grounds */

  /* Actions */
  --action-primary: var(--px-navy);       /* dark pill buttons */
  --action-primary-ink: var(--px-ink);
  --action-accent: var(--px-navy);
  --action-brand: var(--px-red);          /* THE start action; label on-red or white */
  --on-red: #FFF3EC;                      /* START NOW label: 4.73:1 on red */
  --on-gold: #1A1200;                     /* label on gold fills: 6.69:1 */

  /* Brand roles */
  --canvas: var(--px-cream);
  --ink: var(--px-ink);
  --primary: var(--px-red);
  --accent: var(--px-gold);
  --support: var(--px-sand);
  --gold-ink: var(--px-brass-lo);         /* gold as text on light grounds: 5.52:1 on cream,
                                             6.32:1 on white (gold-deep was 3.73 and 4.27) */

  /* Dark-surface role flip (hero / footer / instrument) */
  --dark-canvas: var(--px-navy-deep);
  --dark-ink: var(--px-cream);
  --dark-muted: var(--muted-on-dark);
  --dark-support: var(--px-navy-lt);

  /* Gold hairlines: one source, px-gold at an alpha (was #CDA35A, a second gold) */
  --line-gold: color-mix(in srgb, var(--px-gold) 26%, transparent);
}

/* SiteCrafters (sitecrafters.studio) takes this file as px-tokens.css and maps its
   short names onto it: navy→px-navy, red→px-red, cream→px-cream, cream-dk→px-stone-100,
   charcoal→px-ink, mid→px-text-muted, control-edge→px-control-edge, and so on. */