/* GENERATED FROM src/tokens.json — DO NOT EDIT.
   Run `npm run build` in chop-chop-design-system after changing a token.
   Chop Chop design tokens v1.0.0 */

:root {
  --cc-color-brand-50: #FFF1EC;
  --cc-color-brand-100: #FFEDE6;
  --cc-color-brand-200: #FFC9B9;
  --cc-color-brand-300: #FFB59E;
  --cc-color-brand-400: #FF8A6B;
  --cc-color-brand-500: #FF6A45;
  --cc-color-brand-600: #FF5A34;
  --cc-color-brand-700: #FF4A26;
  --cc-color-brand-800: #E5301D;
  --cc-color-brand-900: #E12E1C;
  --cc-color-brand-950: #C81E12;
  --cc-color-ink-300: #A79E95;
  --cc-color-ink-400: #A0968D;
  --cc-color-ink-500: #857C74;
  --cc-color-ink-600: #6E655E;
  --cc-color-ink-800: #23201C;
  --cc-color-ink-900: #1B1714;
  --cc-color-ink-950: #100D0B;
  --cc-color-paper-50: #FFFFFF;
  --cc-color-paper-100: #F7F3EC;
  --cc-color-paper-200: #F0EBE3;
  --cc-color-paper-300: #EDE7DE;
  --cc-color-paper-400: #ECE7E0;
  --cc-color-paper-500: #E7E2D9;
  --cc-color-success-100: #CFE3C4;
  --cc-color-success-500: #35D07F;
  --cc-color-success-700: #1B9E5E;
  --cc-color-warning-500: #FFB020;
  --cc-color-warning-800: #8A5E00;
  --cc-color-danger-500: #E12E1C;
  --cc-color-danger-700: #C81E12;
  --cc-color-danger-900: #C43015;
  --cc-gradient-offer: linear-gradient(165deg, #FF5A34 0%, #E5301D 58%, #C81E12 100%);
  --cc-gradient-action: linear-gradient(135deg, #FF6A45, #E12E1C);
  --cc-gradient-action-flat: linear-gradient(90deg, #FF4A26, #E12E1C);
  --cc-gradient-night-sky: radial-gradient(120% 80% at 50% 8%, #1C1815 0%, #100D0B 62%);
  --cc-font-display: 'Archivo', system-ui, sans-serif;
  --cc-font-body: -apple-system, system-ui, sans-serif;
  --cc-font-mono: ui-monospace, 'SF Mono', monospace;
  --cc-weight-medium: 500;
  --cc-weight-semibold: 600;
  --cc-weight-bold: 700;
  --cc-weight-extrabold: 800;
  --cc-weight-black: 900;
  --cc-size-overline: 11px;
  --cc-size-caption: 12px;
  --cc-size-caption-lg: 12.5px;
  --cc-size-footnote: 13px;
  --cc-size-footnote-lg: 13.5px;
  --cc-size-body: 15px;
  --cc-size-body-lg: 16px;
  --cc-size-title: 17px;
  --cc-size-title-lg: 20px;
  --cc-size-heading: 22px;
  --cc-size-heading-lg: 26px;
  --cc-size-display: 40px;
  --cc-size-display-lg: 66px;
  --cc-size-hero: 74px;
  --cc-tracking-tight: -0.02em;
  --cc-tracking-snug: -0.01em;
  --cc-tracking-normal: 0;
  --cc-tracking-wide: 0.06em;
  --cc-tracking-label: 0.12em;
  --cc-tracking-overline: 0.28em;
  --cc-radius-xs: 2px;
  --cc-radius-sm: 6px;
  --cc-radius-md: 10px;
  --cc-radius-lg: 14px;
  --cc-radius-xl: 16px;
  --cc-radius-2xl: 18px;
  --cc-radius-3xl: 20px;
  --cc-radius-4xl: 22px;
  --cc-radius-pill: 999px;
  --cc-space-1: 2px;
  --cc-space-2: 4px;
  --cc-space-3: 6px;
  --cc-space-4: 9px;
  --cc-space-5: 10px;
  --cc-space-6: 12px;
  --cc-space-7: 14px;
  --cc-space-8: 16px;
  --cc-space-9: 20px;
  --cc-space-10: 22px;
  --cc-space-11: 26px;
  --cc-space-12: 30px;
  --cc-space-13: 40px;
  --cc-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --cc-shadow-md: 0 8px 26px rgba(0,0,0,0.06);
  --cc-shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
  --cc-shadow-raised: 0 12px 30px rgba(0,0,0,0.22);
  --cc-shadow-accent: 0 10px 26px rgba(255,74,38,0.32);
  --cc-shadow-positive: 0 14px 34px rgba(53,208,127,0.4);
  --cc-shadow-sheet: 0 -16px 44px rgba(0,0,0,0.14);
  --cc-shadow-focus-positive: 0 0 0 4px rgba(53,208,127,0.18);

  /* Semantic aliases — light is the default for both portals. */
  --cc-bg: #F7F3EC;
  --cc-surface: #FFFFFF;
  --cc-surface-sunken: #F0EBE3;
  --cc-border: #F0EBE3;
  --cc-border-strong: #E7E2D9;
  --cc-text: #1B1714;
  --cc-text-muted: #6E655E;
  --cc-text-subtle: #A0968D;
  --cc-accent: #FF4A26;
  --cc-accent-text: #FFFFFF;
  --cc-positive: #1B9E5E;
  --cc-critical: #E12E1C;
}

/* The driver app and any deliberately dark surface. Opt in with data-theme="dark";
   this is NOT wired to prefers-color-scheme, because which surfaces are dark is a
   design decision per screen, not a user preference. */
[data-theme="dark"] {
  --cc-bg: #1B1714;
  --cc-bg-deep: #100D0B;
  --cc-surface: rgba(255,255,255,0.05);
  --cc-surface-raised: rgba(255,255,255,0.08);
  --cc-border: rgba(255,255,255,0.10);
  --cc-text: #FFFFFF;
  --cc-text-muted: rgba(255,255,255,0.45);
  --cc-text-subtle: rgba(255,255,255,0.42);
  --cc-accent: #FF4A26;
  --cc-accent-text: #FFFFFF;
  --cc-positive: #35D07F;
  --cc-critical: #E12E1C;
}

@keyframes cc-pulse { 0% { transform: scale(1); opacity: .55 } 100% { transform: scale(2.6); opacity: 0 } }