/**
 * Big Shorts brand tokens
 *
 * This is the canonical CSS design contract for every public-facing page.
 * Components consume semantic variables; they do not own brand values.
 * Change a primitive here and every consumer updates, mirroring the
 * pure-function model: component styles are deterministic token readers.
 */
:root {
  color-scheme: light;

  /* Primitive palette */
  --bs-color-ink: #0e1414;
  --bs-color-paper: #f4f5f7;
  --bs-color-white: #ffffff;
  --bs-color-burn: #d8431e;
  --bs-color-lock: #1e5a3e;
  --bs-color-pink: #ff7fc8;
  --bs-color-coral: #ff7c64;
  --bs-color-sun: #ffe45c;
  --bs-color-sky: #7fe4ff;
  --bs-color-mint: #7fde7f;
  --bs-color-grape: #726eba;

  /* Neutral scale */
  --bs-color-panel: #171e1e;
  --bs-color-media: #202828;
  --bs-color-ink-soft: #2b3435;
  --bs-color-ink-rule: #354041;
  --bs-color-panel-rule: #384344;
  --bs-color-muted: #657074;
  --bs-color-muted-soft: #6f7a7d;
  --bs-color-dark-muted: #abb5b7;
  --bs-color-dark-copy: #aeb7ba;
  --bs-color-rule: #dce1e3;
  --bs-color-rule-strong: #bfc7c9;
  --bs-color-paper-dark-copy: #4c5555;

  /* Extended neutral and presentation palette */
  --bs-color-ink-deepest: #080b0b;
  --bs-color-ink-deeper: #0a0f0f;
  --bs-color-media-deep: #101616;
  --bs-color-panel-raised: #1b2323;
  --bs-color-panel-hover: #222c2c;
  --bs-color-footer-rule: #283031;
  --bs-color-media-highlight: #343e3e;
  --bs-color-teal-deep: #31585e;
  --bs-color-green-deep: #355440;
  --bs-color-green-dark: #397f4a;
  --bs-color-panel-rule-light: #3d494a;
  --bs-color-green: #439b59;
  --bs-color-panel-rule-strong: #4a5658;
  --bs-color-slate-700: #4b5658;
  --bs-color-slate-680: #4c5557;
  --bs-color-green-bright: #4fa965;
  --bs-color-slate-650: #515958;
  --bs-color-slate-600: #697275;
  --bs-color-slate-580: #6e7a7c;
  --bs-color-slate-560: #6f7779;
  --bs-color-slate-540: #758183;
  --bs-color-green-soft: #78bd88;
  --bs-color-slate-500: #7f8b8d;
  --bs-color-slate-480: #849092;
  --bs-color-slate-460: #899295;
  --bs-color-slate-450: #899496;
  --bs-color-slate-430: #8f999b;
  --bs-color-slate-420: #929c9f;
  --bs-color-slate-400: #9aa5a7;
  --bs-color-slate-380: #9ca7a9;
  --bs-color-footer-copy: #9fa8aa;
  --bs-color-dark-caption: #9fa9ab;
  --bs-color-green-pale: #9fdfad;
  --bs-color-slate-360: #a0a8aa;
  --bs-color-slate-340: #b4bec0;
  --bs-color-sky-pale: #b6eaf5;
  --bs-color-slate-320: #b7c0c2;
  --bs-color-slate-300: #b9bec4;
  --bs-color-dark-lede: #b9c1c3;
  --bs-color-slate-280: #bac3c5;
  --bs-color-proof-copy: #bec5c7;
  --bs-color-slate-260: #bdc5c7;
  --bs-color-slate-240: #c7d0d2;
  --bs-color-slate-220: #d3dadd;
  --bs-color-slate-200: #d7dcde;
  --bs-color-slate-190: #d7dddf;
  --bs-color-slate-180: #d8dfe0;
  --bs-color-slate-170: #dce1e2;
  --bs-color-slate-short: #ddeecc;
  --bs-color-green-wash: #dff5e4;
  --bs-color-sky-wash: #dff7fc;
  --bs-color-slate-150: #e8ecee;
  --bs-color-slate-140: #e9edef;
  --bs-color-sun-muted: #ead77a;
  --bs-color-paper-muted: #edeff2;
  --bs-color-green-paper: #f1faf3;

  /* Typography */
  --bs-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --bs-font-serif: Castoro, "Source Serif 4", Georgia, serif;
  --bs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bs-font-weight-body: 500;
  --bs-font-weight-strong: 760;
  --bs-font-weight-label: 850;
  --bs-font-weight-display: 880;
  --bs-font-weight-black: 900;
  --bs-tracking-display: -0.06em;
  --bs-tracking-heading: -0.045em;
  --bs-tracking-body: -0.011em;
  --bs-tracking-label: 0.14em;
  --bs-leading-display: 0.91;
  --bs-leading-heading: 1;
  --bs-leading-body: 1.5;

  /* Layout */
  --bs-page-max: 1080px;
  --bs-page-gutter: 48px;
  --bs-page-gutter-mobile: 30px;
  --bs-section-space: 92px;
  --bs-section-space-mobile: 70px;
  --bs-grid-gap: 14px;

  /* Shape */
  --bs-radius-xs: 4px;
  --bs-radius-sm: 8px;
  --bs-radius-md: 16px;
  --bs-radius-lg: 20px;
  --bs-radius-xl: 26px;
  --bs-radius-pill: 999px;
  --bs-border-thin: 1px;
  --bs-border-tile: 3px;

  /* Effects */
  --bs-shadow-card: 0 18px 42px rgb(14 20 20 / 12%);
  --bs-shadow-raised: 0 24px 64px -36px rgb(14 20 20 / 22%);
  --bs-shadow-media: 0 12px 28px rgb(0 0 0 / 38%);
  --bs-shadow-text: 0 2px 10px rgb(0 0 0 / 95%);
  --bs-overlay-header: rgb(244 245 247 / 92%);
  --bs-overlay-header-soft: rgb(244 245 247 / 91%);
  --bs-overlay-rule: rgb(220 225 227 / 90%);
  --bs-overlay-control: rgb(14 20 20 / 46%);
  --bs-overlay-pill: rgb(8 12 12 / 68%);
  --bs-overlay-soft: rgb(14 20 20 / 18%);
  --bs-overlay-gradient-mid: rgb(14 20 20 / 36%);
  --bs-overlay-medium: rgb(14 20 20 / 52%);
  --bs-overlay-gradient-deep: rgb(14 20 20 / 60%);
  --bs-overlay-strong: rgb(14 20 20 / 72%);
  --bs-overlay-gradient-bottom: rgb(14 20 20 / 76%);
  --bs-overlay-image-top: rgb(0 0 0 / 40%);
  --bs-overlay-image-bottom: rgb(0 0 0 / 50%);
  --bs-overlay-image-label: rgb(7 10 10 / 90%);
  --bs-alpha-black-18: rgb(0 0 0 / 18%);
  --bs-alpha-black-22: rgb(0 0 0 / 22%);
  --bs-alpha-black-24: rgb(0 0 0 / 24%);
  --bs-alpha-black-32: rgb(0 0 0 / 32%);
  --bs-alpha-black-38: rgb(0 0 0 / 38%);
  --bs-alpha-black-40: rgb(0 0 0 / 40%);
  --bs-alpha-black-46: rgb(0 0 0 / 46%);
  --bs-alpha-black-50: rgb(0 0 0 / 50%);
  --bs-alpha-black-70: rgb(0 0 0 / 70%);
  --bs-alpha-black-80: rgb(0 0 0 / 80%);
  --bs-alpha-black-90: rgb(0 0 0 / 90%);
  --bs-alpha-black-95: rgb(0 0 0 / 95%);
  --bs-alpha-ink-10: rgb(14 20 20 / 10%);
  --bs-alpha-ink-12: rgb(14 20 20 / 12%);
  --bs-alpha-ink-14: rgb(14 20 20 / 14%);
  --bs-alpha-ink-20: rgb(14 20 20 / 20%);
  --bs-alpha-ink-28: rgb(14 20 20 / 28%);
  --bs-alpha-ink-34: rgb(14 20 20 / 34%);
  --bs-alpha-ink-45: rgb(14 20 20 / 45%);
  --bs-alpha-ink-46: rgb(14 20 20 / 46%);
  --bs-alpha-ink-48: rgb(14 20 20 / 48%);
  --bs-alpha-ink-55: rgb(14 20 20 / 55%);
  --bs-alpha-ink-86: rgb(14 20 20 / 86%);
  --bs-alpha-white-12: rgb(255 255 255 / 12%);
  --bs-alpha-white-20: rgb(255 255 255 / 20%);
  --bs-alpha-white-24: rgb(255 255 255 / 24%);
  --bs-alpha-white-25: rgb(255 255 255 / 25%);
  --bs-alpha-white-28: rgb(255 255 255 / 28%);
  --bs-alpha-white-38: rgb(255 255 255 / 38%);
  --bs-alpha-white-75: rgb(255 255 255 / 75%);
  --bs-alpha-burn-13: rgb(216 67 30 / 13%);
  --bs-alpha-burn-22: rgb(216 67 30 / 22%);
  --bs-alpha-sky-09: rgb(127 228 255 / 9%);
  --bs-alpha-sky-20: rgb(127 228 255 / 20%);
  --bs-alpha-mint-09: rgb(127 222 127 / 9%);
  --bs-alpha-pink-09: rgb(255 127 200 / 9%);
  --bs-alpha-sun-10: rgb(255 228 92 / 10%);
  --bs-alpha-sun-20: rgb(255 228 92 / 20%);
  --bs-alpha-sun-36: rgb(255 228 92 / 36%);
  --bs-alpha-sun-40: rgb(255 228 92 / 40%);
  --bs-alpha-sun-72: rgb(255 228 92 / 72%);
  --bs-alpha-green-16: rgb(79 169 101 / 16%);
  --bs-alpha-ink-deep-78: rgb(7 10 10 / 78%);
  --bs-backdrop-blur: 10px;

  /* Motion */
  --bs-duration-fast: 160ms;
  --bs-duration-base: 200ms;
  --bs-duration-slow: 420ms;
  --bs-ease-standard: ease;
  --bs-ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Semantic public-site roles */
  --bs-surface-page: var(--bs-color-paper);
  --bs-surface-card: var(--bs-color-white);
  --bs-surface-dark: var(--bs-color-ink);
  --bs-surface-panel: var(--bs-color-panel);
  --bs-text-primary: var(--bs-color-ink);
  --bs-text-secondary: var(--bs-color-muted);
  --bs-text-on-dark: var(--bs-color-paper);
  --bs-text-on-dark-muted: var(--bs-color-dark-muted);
  --bs-border-default: var(--bs-color-rule);
  --bs-accent-primary: var(--bs-color-burn);
  --bs-accent-affirm: var(--bs-color-lock);
  --bs-focus-ring: var(--bs-color-burn);
  --bs-page-width: min(var(--bs-page-max), calc(100vw - var(--bs-page-gutter)));

  /* Compatibility aliases for existing public pages. */
  --ink: var(--bs-color-ink);
  --paper: var(--bs-color-paper);
  --white: var(--bs-color-white);
  --burn: var(--bs-color-burn);
  --lock: var(--bs-color-lock);
  --muted: var(--bs-color-muted);
  --rule: var(--bs-color-rule);
  --panel: var(--bs-color-panel);
  --dark-muted: var(--bs-color-dark-muted);
  --pink: var(--bs-color-pink);
  --coral: var(--bs-color-coral);
  --sun: var(--bs-color-sun);
  --sky: var(--bs-color-sky);
  --mint: var(--bs-color-mint);
  --grape: var(--bs-color-grape);
  --sans: var(--bs-font-sans);
  --page: var(--bs-page-width);
  --radius: var(--bs-radius-lg);
}

@media (max-width: 600px) {
  :root {
    --bs-page-width: min(100% - var(--bs-page-gutter-mobile), var(--bs-page-max));
  }
}