/*
 * File: assets/css/tokens.css, the Mammoth palette, semantic sets and scales.
 * Purpose: declares the reference palette once, the light set and the dark set of the 10 contract colors with the
 * ground and component tokens that change with the mode, then the shared fills, type, space, motion and tear tokens.
 * Defines: the --color- palette, the contract tokens of PlexCMS and the {category}-{property}-{variant} tokens
 * Doc: docs/notes/mammothcomics.com/assets/themes/mammoth/assets/css/tokens.css.md
 */

/* Tier 1: the reference palette, the logo colors and the status fills of the reference theme. */
:root {
  --color-red-950: #5c0f0c;
  --color-red-900: #7a1410;
  --color-red-700: #9c1e18;
  --color-red-600: #c42021;
  --color-orange-400: #f78e1e;
  --color-magenta-600: #a3238e;
  --color-magenta-700: #86196f;
  --color-gray-300: #bcbdc0;
  --color-ink-950: #0e0602;
  --color-ink-900: #160f0d;
  --color-ink-850: #1c1412;
  --color-ink-700: #4a3f3a;
  --color-ink-600: #6b5f58;
  --color-stone-500: #887a6e;
  --color-paper-0: #ffffff;
  --color-paper-50: #f7f1e5;
  --color-paper-100: #efe7da;
  --color-paper-200: #e2d6c4;
  --color-night-900: #1a1412;
  --color-night-850: #231b17;
  --color-night-800: #2c231f;
  --color-night-700: #3d332e;
  --color-cream-50: #f7f1e8;
  --color-cream-200: #d4c9bf;
  --color-cream-400: #b3a69b;
  --color-rose-100: #f6dcd4;
  --color-success-700: #15803d;
  --color-warning-700: #b45309;
  --color-danger-700: #b91c1c;
  --color-danger-800: #991b1b;
  --color-zinc-800: #27272a;
  --color-zinc-700: #3f3f46;
  --color-ink-950-a20: rgba(14, 6, 2, 0.2);
  --color-ink-950-a60: rgba(14, 6, 2, 0.6);
}

/* Tier 2, light set: the 10 contract colors, the focus ring, the panel text a dark ground cannot change, the ink
   ground and the tokens that follow the mode. */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: var(--color-paper-0);
  --bg-alt: var(--color-paper-50);
  --panel: var(--color-paper-0);
  --line: var(--color-paper-200);
  --line-strong: var(--color-stone-500);
  --text: var(--color-ink-850);
  --text-2: var(--color-ink-700);
  --text-3: var(--color-ink-600);
  --inverse-bg: var(--color-ink-850);
  --inverse-text: var(--color-paper-0);
  --focus: var(--color-ink-850);
  --text-panel: var(--color-ink-850);
  --text-2-panel: var(--color-ink-700);
  --text-3-panel: var(--color-ink-600);
  --color-ground-ink: var(--color-ink-900);
  --card-border-default: var(--color-ink-850);
  --field-accent-default: var(--color-red-600);
  --tear-shadow: rgba(14, 6, 2, 0.35);
}

/* Tier 2, dark set: the same names; the red ground, the rays, the tags and the buttons are the same in both modes. */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--color-night-900);
  --bg-alt: var(--color-night-850);
  --panel: var(--color-night-800);
  --line: var(--color-night-700);
  --line-strong: var(--color-stone-500);
  --text: var(--color-cream-50);
  --text-2: var(--color-cream-200);
  --text-3: var(--color-cream-400);
  --inverse-bg: var(--color-cream-50);
  --inverse-text: var(--color-night-900);
  --focus: var(--color-cream-50);
  --text-panel: var(--color-cream-50);
  --text-2-panel: var(--color-cream-200);
  --text-3-panel: var(--color-cream-400);
  --color-ground-ink: var(--color-ink-950);
  --card-border-default: var(--color-stone-500);
  /* Checked radios and checkboxes take a fill that holds 3:1 against the 3 dark fills. */
  --field-accent-default: var(--color-orange-400);
  --tear-shadow: rgba(0, 0, 0, 0.6);
}

/* Shared tokens: the accent, the buttons, the status fills, the grounds and the component tokens of tier 3. */
:root {
  --accent: var(--color-red-600);
  --accent-hover: var(--color-red-700);
  --on-accent: var(--color-paper-0);
  --btn-light: var(--color-paper-100);
  --btn-light-hover: var(--color-paper-200);
  --on-btn-light: var(--color-ink-950);

  --status-success: var(--color-success-700);
  --status-warning: var(--color-warning-700);
  --status-danger: var(--color-danger-700);
  --status-danger-hover: var(--color-danger-800);
  --toast: var(--color-zinc-800);
  --badge-dark: var(--color-zinc-700);
  --on-status: var(--color-paper-0);
  --shade: var(--color-ink-950-a20);
  --scrim: var(--color-ink-950-a60);

  --color-ground-red: var(--color-red-900);
  --color-ground-ray: var(--color-red-700);
  --color-ground-dot: var(--color-red-950);
  --color-ground-paper: var(--bg);
  --color-ground-newsprint: var(--bg-alt);
  --color-text-on-ground: var(--color-paper-0);
  --color-text-muted-red: var(--color-rose-100);
  --color-text-muted-ink: var(--color-cream-200);
  --color-logo-orange: var(--color-orange-400);

  --button-background-primary: var(--accent);
  --button-background-primary-hover: var(--accent-hover);
  --button-background-ink: var(--color-ground-ink);
  --button-background-ink-hover: var(--color-ink-700);
  --button-shadow-default: 3px 3px 0 0 var(--color-ink-950);
  --button-shadow-hover: 4px 4px 0 0 var(--color-ink-950);
  --button-shadow-pressed: 1px 1px 0 0 var(--color-ink-950);
  --card-shadow-default: var(--shadow-1);
  --card-shadow-hover: var(--shadow-2);
  --tag-background-preorder: var(--color-magenta-600);
  --tag-background-preorder-hover: var(--color-magenta-700);
  --tag-background-new: var(--color-orange-400);
  --tag-background-deal: var(--color-red-600);
  --tag-background-graded: var(--color-ink-950);
  --tag-background-out: var(--color-gray-300);
  --tag-text-dark: var(--color-ink-950);
  --tag-text-light: var(--color-paper-0);
  --field-border-default: var(--line-strong);
  --field-border-hover: var(--text-2);
  --field-border-focus: var(--text);
  --current-background-default: var(--color-orange-400);
  --current-text-default: var(--color-ink-950);

  --font-display: 'Bangers', 'Arial Black', Arial, sans-serif;
  --font-body: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --font: var(--font-body);

  --fs-display: clamp(44px, 4.2vw + 28px, 76px);
  --fs-h1: clamp(40px, 3.1vw + 28.4px, 64px);
  --fs-h2: clamp(34px, 2vw + 26.5px, 52px);
  --fs-h3: clamp(24px, 0.66vw + 21.5px, 30px);
  --fs-5: 22px;
  --fs-4: 18px;
  --fs-3: 16px;
  --fs-2: 14px;
  --fs-1: 12px;
  --lh-display: 0.95;
  --lh-h2: 1;
  --lh-h3: 1.05;
  --lh-tight: 1.2;
  --lh-meta: 1.4;
  --lh-body: 1.55;
  --lh-head: 1.05;
  --tracking-display: 0.02em;
  --tracking-tag: 0.06em;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 24px;
  --r-full: 999px;
  --border-panel: 3px;
  --border-field: 2px;
  --shadow-1: 3px 3px 0 0 var(--color-ink-950);
  --shadow-2: 6px 6px 0 0 var(--color-ink-950);

  --dur: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  --layer-bar: 40;
  --layer-scrim: 50;
  --layer-drawer: 60;
  --layer-toast: 70;

  --container: 1200px;
  --container-narrow: 760px;
  --gutter: 16px;
  --nav-h: 56px;
  --band-padding-block: var(--s-7);
  --target-min: 44px;
  --control-height: 48px;
  --emblem-size: 40px;
  --masthead-home-height: 232px;
  --masthead-page-height: 148px;
  --masthead-portal-height: 120px;
  --lockup-width: 280px;
  --skyline-height: 56px;
  --halftone-width: 120px;
  --halftone-grid: 7px;
  --halftone-art-grid: 6px;
  --ray-origin-x: 50%;
  --ray-origin-y: 100%;
  --ray-origin-home-x: 24%;
  --ray-origin-home-y: 45%;
  --burst-points: polygon(50% 0%, 59.8% 13.3%, 75% 6.7%, 76.9% 23.1%, 93.3% 25%, 86.7% 40.2%, 100% 50%, 86.7% 59.8%, 93.3% 75%, 76.9% 76.9%, 75% 93.3%, 59.8% 86.7%, 50% 100%, 40.2% 86.7%, 25% 93.3%, 23.1% 76.9%, 6.7% 75%, 13.3% 59.8%, 0% 50%, 13.3% 40.2%, 6.7% 25%, 23.1% 23.1%, 25% 6.7%, 40.2% 13.3%);

  /* The torn edge: 1 tear path tiled along the band top; the shadow copy is the same path under a blur filter. */
  --tear-height: 12px;
  --tear-tile: 320px;
  --tear-shadow-offset: 1px;
  --tear-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V14L22 9L41 13L60 6L83 11L101 4L126 10L148 7L171 13L190 5L214 9L236 3L259 10L281 6L305 12L327 4L350 9L372 6L396 12L418 5L441 10L463 3L487 9L509 7L533 12L556 5L579 10L600 14V24Z'/%3E%3C/svg%3E");
  --tear-mask-shadow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 24' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-2%25' y='-60%25' width='104%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' d='M0 24V14L22 9L41 13L60 6L83 11L101 4L126 10L148 7L171 13L190 5L214 9L236 3L259 10L281 6L305 12L327 4L350 9L372 6L396 12L418 5L441 10L463 3L487 9L509 7L533 12L556 5L579 10L600 14V24Z'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --nav-h: 64px;
    --band-padding-block: var(--s-8);
    --emblem-size: 48px;
    --masthead-home-height: 300px;
    --masthead-page-height: 176px;
    --masthead-portal-height: 140px;
    --lockup-width: 360px;
    --skyline-height: 80px;
    --halftone-width: 200px;
    --halftone-grid: 9px;
    --ray-origin-home-x: 33%;
    --tear-height: 20px;
    --tear-tile: 520px;
    --tear-shadow-offset: 2px;
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 32px;
    --nav-h: 72px;
    --band-padding-block: var(--s-9);
    --emblem-size: 56px;
    --masthead-home-height: 340px;
    --masthead-page-height: 208px;
    --masthead-portal-height: 160px;
    --lockup-width: 400px;
    --skyline-height: 112px;
    --halftone-width: 320px;
    --ray-origin-home-x: 39%;
    --tear-height: 28px;
    --tear-tile: 720px;
    --tear-shadow-offset: 3px;
  }
}

/* Reduced motion makes every move an instant state change. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}