/* ==========================================================================
   design-tokens.css — shared CSS custom properties for the entire app.
   Palette derived from the actual Print Pack Sign Expo / Tashikka badge
   (indigo-violet gradient, CMYK accent), paired with Inter/Plus Jakarta
   Sans for a clean modern SaaS feel. Tight spacing scale, no default
   browser form chrome anywhere.
   ========================================================================== */

:root {
  /* --- Brand (4th edition: cream / crimson red / antique gold) --- */
  --accent-600: #B8151C;   /* red — hover / pressed */
  --accent-500: #E31C24;   /* red — primary */
  --accent-400: #EA4B51;   /* red — lighter */
  --accent-100: #FBE4E5;   /* red — tint (chips, badges) */
  --accent-50:  #FDF2F2;   /* red — faintest tint */
 
  --gold-600: #96784A;     /* gold — deeper */
  --gold-500: #B8925A;     /* gold — ring/border accent */
  --gold-100: #F3E9D6;     /* gold — tint */
 
  --cream-500: #F4EFDC;    /* badge canvas base tone */
  --cream-600: #EFE7CE;    /* badge canvas gradient shadow */
 
  --cmyk-cyan:    #0098FF;
  --cmyk-magenta: #E6087F;
  --cmyk-yellow:  #FFFF00;
  --cmyk-black:   #141414;
 
  /* --- Neutrals --- */
  --ink-900: #14141F;
  --ink-700: #33334A;
  --ink-500: #6B6B85;
  --ink-300: #A0A0B8;
  --ink-100: #E7E8F0;
  --surface-0: #FFFFFF;
  --surface-50: #F7F8FB;
  --surface-100: #F1F2F8;
 
  /* --- Semantic --- */
  --success-500: #1BA672;
  --success-100: #E4F7EE;
  --danger-500: #E0453F;
  --danger-100: #FCEAE9;
  --warning-500: #D98A0F;
  --warning-100: #FCF2E0;
 
  /* --- Type --- */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
 
  /* --- Spacing scale (8px based, tight) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
 
  /* --- Radius --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;
 
  /* --- Shadow (subtle, SaaS-style, not heavy) --- */
  --shadow-sm: 0 1px 2px rgba(20, 20, 31, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 20, 31, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 20, 31, 0.14);
 
  --transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Author CSS that sets `display` on a component (e.g. .modal-backdrop{display:flex})
   otherwise beats the browser's built-in `[hidden]{display:none}` UA rule, since
   author styles always win over UA styles regardless of specificity or order.
   This makes the hidden attribute authoritative everywhere in the app. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--surface-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--accent-100); color: var(--accent-600); }

/* Focus visibility — accessibility floor, never remove without replacing */
:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Scrollbar (webkit) — thin, unobtrusive */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-100); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }