/*
 * Printastico design tokens: direction B "Galleria" (picked 2026-10-29).
 * Dark is the brand's own look. "Paper" (data-theme="light") is the light theme. The website follows the visitor's
 * system setting until they pick one with the toggle (2026-10-30). Every document uses Paper: quotes, invoices, PDFs
 * and emails.
 * Components use only these role tokens, never raw hex. Contrast pairs are listed in design/brand.md.
 */
:root {
  /* ground and ink */
  --color-bg: #121110;            /* Night */
  --color-surface: #1C1A18;       /* Plinth: cards, panels */
  --color-surface-2: #25221F;     /* wells, inputs, hover fills */
  --color-border: #34302B;        /* decorative dividers */
  --color-border-strong: #7A736A; /* input, checkbox and card outlines that must be seen (3:1) */
  --color-text: #F4F1EA;          /* Bone */
  --color-text-muted: #A8A29A;    /* Stone: secondary text */

  /* champagne gold: the one accent (picked 2026-10-29 from 5 golds; replaced brass #D9A441, which read too yellow) */
  --color-accent: #D8BC7E;        /* primary buttons, selected controls */
  --color-accent-hover: #DDC48D;
  --color-accent-text: #121110;   /* text on gold */
  --color-accent-ink: #D8BC7E;    /* gold used as text: links, totals */
  --color-accent-soft: rgb(216 188 126 / 0.14);
  --color-selected-edge: #D8BC7E; /* outline of a selected control: must reach 3:1 against bg */

  /* states */
  --color-focus: #9DBBFF;
  --color-success: #7FD1A0;
  --color-warning: #FFB37A;
  --color-danger: #FF8E80;

  /* artwork and the coin device (illustration only, never UI) */
  --color-oxblood: #9E3B2F;
  --color-bone: #F4F1EA;
  --color-coin-ink: #121110;      /* text printed on a coin face: same in both themes */
  --color-coin-edge-1: #CFC8BC;
  --color-coin-edge-2: #8E877C;
  --color-spotlight: #2E2A25;

  /* type: Instrument Serif for display, Instrument Sans for everything else */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-text: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --text-xs: 0.75rem;    /* 12 captions only */
  --text-sm: 0.875rem;   /* 14 */
  --text-md: 1rem;       /* 16 body */
  --text-lg: 1.125rem;   /* 18 */
  --text-xl: 1.25rem;    /* 20 lead */
  --text-2xl: 1.5rem;    /* 24 */
  --text-3xl: 1.875rem;  /* 30 */
  --text-4xl: 2.25rem;   /* 36 */
  --text-5xl: 3rem;      /* 48 */
  --text-display: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
  --text-section: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --leading-body: 1.6;
  --leading-tight: 1.05;
  --tracking-label: 0.16em;

  /* space: 4 px base */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  /* shape: the sharp family, like a framed print */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --shadow-object: 0 24px 48px rgb(0 0 0 / 0.5);   /* products only: coins, prints */
  --shadow-panel: 0 12px 32px rgb(0 0 0 / 0.35);   /* sticky summary, menus */

  /* motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;

  --container: 1200px;
  --gutter: 16px;
  color-scheme: dark;
}

@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }

/* Paper: the light theme for documents and for visitors who switch */
:root[data-theme="light"] {
  --color-bg: #F6F3EC;
  --color-surface: #FFFFFF;
  --color-surface-2: #EFEAE0;
  --color-border: #DDD6C9;
  --color-border-strong: #857C70;
  --color-text: #1A1816;
  --color-text-muted: #5E574F;
  --color-accent: #D8BC7E;
  --color-accent-hover: #CBAE6C;
  --color-accent-text: #1A1816;
  --color-accent-ink: #756644;    /* gold dark enough for text on Paper (4.7:1 on surface-2) */
  --color-accent-soft: rgb(216 188 126 / 0.22);
  --color-selected-edge: #1A1816; /* gold is too light on Paper to mark a selection, so selections get an ink edge */
  --color-focus: #2952CC;
  --color-success: #186B42;  /* #1F7A4D was 4.44:1 on surface-2 */
  --color-warning: #9A4A00;
  --color-danger: #B42318;
  --color-spotlight: #FFFFFF;
  --shadow-object: 0 20px 40px rgb(26 24 22 / 0.22);
  --shadow-panel: 0 12px 32px rgb(26 24 22 / 0.12);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; }
}