/* DESIGN TOKENS
   Generated from the Figma file "Cherokee Brand - Design System" (variables):
   https://www.figma.com/design/7kL9ClEaZrfdxIPWhcRS6e/Cherokee-Brand---Design-System
   Names match Figma: color/text/primary -> --color-text-primary.
   Load this file before every other stylesheet. Change values in Figma first,
   then here. scripts/check-color-tokens.mjs fails if a page uses a raw colour.

   Use semantic tokens (text, surface, border, action...) in components.
   Use primitives (red-500, neutral-200...) only when no semantic token fits. */

:root {
  /* ---- CN / Primitives ---- */
  --color-red-50: #fbf4f5;
  --color-red-200: #e4bac0;
  --color-red-tint-50: #d38c97;
  --color-red-500: #a6192e;
  --color-red-600: #8d1527;
  --color-red-700: #741220;
  --color-gold-50: #fef6e6;
  --color-gold-200: #fae1a6;
  --color-gold-tint-50: #f9d480;
  --color-gold-500: #f2a900;
  --color-gold-700: #855d00;
  --color-green-50: #ebf4f0;
  --color-green-200: #99c9b6;
  --color-green-tint-50: #80bba4;
  --color-green-500: #007749;
  --color-green-700: #005333;
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f2f2f2;
  --color-neutral-100: #e6e6e6;
  --color-neutral-200: #cccccc;
  --color-neutral-400: #999999;
  --color-neutral-500: #808080;
  --color-neutral-600: #666666;
  --color-neutral-800: #333333;
  --color-neutral-900: #1a1a1a;
  --color-neutral-950: #0d0d0d;
  --color-neutral-1000: #000000;
  --color-pattern-red: #9c1a2d;   /* pattern shapes as they appear on red-500 (cherokee.gov) */
  --color-pattern-ink: #262626;   /* pattern-arc-dark.svg: this ink at 7.8% */

  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --border-default: 1px;
  --border-focus: 2px;

  --size-control: 48px;
  --size-control-sm: 40px;

  --type-size-caption: 12px;
  --type-size-body-sm: 14px;
  --type-size-body: 16px;
  --type-size-lead: 20px;
  --type-size-heading-sm: 24px;
  --type-size-heading: 32px;
  --type-size-title: 48px;
  --type-size-display: 64px;
  --type-line-caption: 16px;
  --type-line-body-sm: 20px;
  --type-line-body: 24px;
  --type-line-lead: 28px;
  --type-line-heading-sm: 32px;
  --type-line-heading: 40px;
  --type-line-title: 56px;
  --type-line-display: 72px;
  --type-family-body: 'Futura', 'Noto Sans Cherokee', sans-serif;
  --type-family-display: 'Garamond', 'Noto Sans Cherokee', serif;

  --opacity-disabled: 0.4;

  /* ---- CN / Official Brand (2024 Standards) ---- */
  --color-red: var(--color-red-500);
  --color-gold: var(--color-gold-500);
  --color-green: var(--color-green-500);
  --color-black: var(--color-neutral-1000);

  /* ---- CN / Semantic (Light) ---- */
  --color-background-canvas: var(--color-neutral-50);
  --color-surface-default: var(--color-neutral-0);
  --color-surface-subtle: var(--color-neutral-100);
  --color-surface-selected: var(--color-pattern-red);
  --color-text-primary: var(--color-neutral-950);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-inverse: var(--color-neutral-0);
  --color-border-subtle: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-500);
  --color-border-focus: var(--color-green-50);
  --color-action-primary: var(--color-red-500);
  --color-action-primary-hover: var(--color-red-600);
  --color-action-primary-pressed: var(--color-red-700);
  --color-action-on-primary: var(--color-neutral-0);
  --color-action-secondary: var(--color-neutral-950);
  --color-action-on-secondary: var(--color-neutral-0);
  --color-focus-ring: var(--color-neutral-200);
  --color-accent-gold: var(--color-gold-500);
  --color-accent-on-gold: var(--color-neutral-950);
  --color-accent-cream: var(--color-gold-200);
  --color-status-success: var(--color-green-50);
  --color-status-success-surface: var(--color-green-50);
  --color-status-warning: var(--color-red-500);
  --color-status-warning-surface: var(--color-gold-50);
  --color-status-error: var(--color-red-500);
  --color-status-error-surface: var(--color-red-50);
  --color-brand-red: var(--color-red-500);
  --color-brand-green: var(--color-green-500);
  --color-brand-charcoal: var(--color-neutral-950);
}

/* ---- CN / Semantic (Dark) ----
   Not switched on yet. Set <html data-color-mode="dark"> to try it.
   (data-theme is taken: the Bible reader uses it for its reading themes.) */
:root[data-color-mode="dark"] {
  --color-background-canvas: var(--color-neutral-950);
  --color-surface-default: var(--color-neutral-900);
  --color-surface-subtle: var(--color-neutral-800);
  --color-text-primary: var(--color-neutral-0);
  --color-text-secondary: var(--color-neutral-200);
  --color-text-inverse: var(--color-neutral-950);
  --color-border-subtle: var(--color-neutral-800);
  --color-border-strong: var(--color-neutral-400);
  --color-status-success-surface: var(--color-green-500);
  --color-status-warning-surface: var(--color-neutral-800);
}