/* Currently Cancelled — design tokens
   Import fonts.css first, then this file. */

:root {
  /* ---- Brand colors ---- */
  --cc-red:        #E3241B; /* Stamp Red — logo, primary buttons, links. 4.6:1 on white */
  --cc-red-dark:   #B3170F; /* hover / pressed */
  --cc-red-soft:   #FFE2DF; /* tinted backgrounds, alerts */
  --cc-ink:        #111111; /* text, outlines, drop shadows */
  --cc-ink-2:      #3A3A3A; /* secondary text */
  --cc-ink-3:      #6B6B6B; /* muted text, captions. 5.3:1 on white */
  --cc-paper:      #FFFFFF; /* cards, stamp fill */
  --cc-newsprint:  #F1EFE9; /* page background */
  --cc-line:       #DAD7CF; /* borders, dividers */

  /* ---- Fun accents (backgrounds & highlights; put Ink text on yellow/pink) ---- */
  --cc-yellow:     #FFE14D; /* Highlighter — hero bands, highlights, share images */
  --cc-pink:       #FF5FA8; /* Bubblegum — tags, badges, stickers */
  --cc-blue:       #2F5BFF; /* Breaking Blue — "breaking"/live labels; white text OK */
  --cc-green:      #0B7F45; /* Uncancelled — comebacks, success; white text OK */

  /* ---- Semantic roles ---- */
  --cc-bg:         var(--cc-newsprint);
  --cc-surface:    var(--cc-paper);
  --cc-text:       var(--cc-ink);
  --cc-text-2:     var(--cc-ink-2);
  --cc-text-muted: var(--cc-ink-3);
  --cc-border:     var(--cc-line);
  --cc-accent:     var(--cc-red);
  --cc-accent-hover: var(--cc-red-dark);
  --cc-shadow-color: var(--cc-ink);

  /* ---- Type ---- */
  --cc-font-script:   "Shrikhand", "Cooper Black", Georgia, serif;
  --cc-font-headline: "Anton", "Impact", "Arial Narrow", sans-serif;
  --cc-font-body:     "Archivo", "Helvetica Neue", Arial, sans-serif;
  --cc-font-mono:     "Space Mono", ui-monospace, Menlo, monospace;
  --cc-font-cartoon:  "Luckiest Guy", "Anton", sans-serif;

  --cc-text-xs:   0.75rem;  /* 12 */
  --cc-text-sm:   0.875rem; /* 14 */
  --cc-text-base: 1rem;     /* 16 */
  --cc-text-lg:   1.125rem; /* 18 */
  --cc-text-xl:   1.25rem;  /* 20 */
  --cc-text-2xl:  1.5rem;   /* 24 */
  --cc-text-3xl:  2rem;     /* 32 */
  --cc-text-4xl:  2.5rem;   /* 40 */
  --cc-text-5xl:  3.5rem;   /* 56 */
  --cc-text-6xl:  4.5rem;   /* 72 */
  --cc-text-7xl:  6rem;     /* 96 */

  /* ---- Space, shape, shadow, motion ---- */
  --cc-space-1: 4px;  --cc-space-2: 8px;  --cc-space-3: 12px; --cc-space-4: 16px;
  --cc-space-5: 24px; --cc-space-6: 32px; --cc-space-7: 48px; --cc-space-8: 64px; --cc-space-9: 96px;
  --cc-radius-sm: 6px; --cc-radius-md: 10px; --cc-radius-lg: 14px; --cc-radius-pill: 999px;
  --cc-border-width: 3px;
  --cc-shadow-pop:    4px 4px 0 var(--cc-shadow-color);  /* the sticker drop shadow */
  --cc-shadow-pop-lg: 8px 8px 0 var(--cc-shadow-color);
  --cc-tilt: -3deg;      /* small playful tilt for stickers/tags; the logo itself uses -9deg */
  --cc-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cc-bg: #111111; --cc-surface: #1C1C1C; --cc-text: #F1EFE9; --cc-text-2: #CFCBC2;
    --cc-text-muted: #9C988F; --cc-border: #333333; --cc-accent: #FF4A3D; --cc-accent-hover: #FF7066;
    --cc-shadow-color: var(--cc-red);
  }
}
:root[data-theme="dark"] {
  --cc-bg: #111111; --cc-surface: #1C1C1C; --cc-text: #F1EFE9; --cc-text-2: #CFCBC2;
  --cc-text-muted: #9C988F; --cc-border: #333333; --cc-accent: #FF4A3D; --cc-accent-hover: #FF7066;
  --cc-shadow-color: var(--cc-red);
}