/* Copied from brand/tokens.css on 2026-11-02 so the site stands on its own.
   brand/tokens.css stays the source: re-copy it when it changes, never edit this copy by hand. */

/* Gist Auto design tokens. Working draft 2026-11-02.
   Mirrors tokens.json. Rules and evidence live in type-and-color.md.
   Load the font with:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Mona+Sans:wdth,wght@100..125,400..800&display=swap">
   Themes: dark is the default on :root. Set data-theme="brand", "media" or "light" on any element to switch its roles.
   Brand hexes and typeface wait on Bryce's yes [CONFIRM]. */

/* Metric-matched fallback so the swap from local Arial to Mona Sans barely moves the layout. */
@font-face {
  font-family: "Mona Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 102.94%;
  ascent-override: 105.89%;
  descent-override: 31.09%;
  line-gap-override: 0%;
}

:root {
  /* Palette. Use roles below in components; use these only to define roles. */
  --gist-navy: #11265D;
  --gist-cream: #EFE9D0;
  --gist-orange: #F75908;
  --gist-orange-light: #FF742B;
  --gist-ink: #081431;
  --gist-charcoal: #1A1C1D;
  --gist-steel: #9BA5B8;
  --gist-slate: #4A5874;
  --gist-haze: #768096;
  --gist-paper: #F6F3E4;
  --gist-error-dark: #EE7C90;
  --gist-error-light: #A92227;
  --gist-ink-rgb: 8 20 49;
  --gist-navy-rgb: 17 38 93;
  --gist-cream-rgb: 239 233 208;

  /* Scrim under text on footage: cream passes 4.5:1 even over white. */
  --color-scrim: rgb(var(--gist-ink-rgb) / 0.68);

  /* Font */
  --font-brand: "Mona Sans", "Mona Sans Fallback", "Helvetica Neue", Arial, Roboto, "Liberation Sans", system-ui, sans-serif;
  --font-display: var(--font-brand);
  --font-text: var(--font-brand);
  --font-width-normal: 100%;
  --font-width-semi-expanded: 112.5%;
  --font-width-expanded: 125%;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Type scale. Fluid between a 390px and a 1440px viewport. Pair each size with its width, weight, tracking and leading. */
  --type-display-1-size: clamp(3.25rem, 0.7429rem + 10.2857vw, 10rem); /* 52px phone, 160px desktop */
  --type-display-1-width: 125%;
  --type-display-1-weight: 800;
  --type-display-1-tracking: -0.025em;
  --type-display-1-leading: 0.9;
  --type-display-2-size: clamp(2.75rem, 1.1714rem + 6.4762vw, 7rem); /* 44px phone, 112px desktop */
  --type-display-2-width: 125%;
  --type-display-2-weight: 800;
  --type-display-2-tracking: -0.02em;
  --type-display-2-leading: 0.92;
  --type-display-3-size: clamp(2.375rem, 1.4rem + 4vw, 5rem); /* 38px phone, 80px desktop */
  --type-display-3-width: 125%;
  --type-display-3-weight: 800;
  --type-display-3-tracking: -0.015em;
  --type-display-3-leading: 0.95;
  --type-heading-1-size: clamp(2rem, 1.4429rem + 2.2857vw, 3.5rem); /* 32px phone, 56px desktop */
  --type-heading-1-width: 112.5%;
  --type-heading-1-weight: 700;
  --type-heading-1-tracking: -0.01em;
  --type-heading-1-leading: 1.0;
  --type-heading-2-size: clamp(1.6875rem, 1.3857rem + 1.2381vw, 2.5rem); /* 27px phone, 40px desktop */
  --type-heading-2-width: 112.5%;
  --type-heading-2-weight: 700;
  --type-heading-2-tracking: -0.005em;
  --type-heading-2-leading: 1.05;
  --type-heading-3-size: clamp(1.375rem, 1.2357rem + 0.5714vw, 1.75rem); /* 22px phone, 28px desktop */
  --type-heading-3-width: 100%;
  --type-heading-3-weight: 600;
  --type-heading-3-tracking: 0em;
  --type-heading-3-leading: 1.15;
  --type-heading-4-size: clamp(1.1875rem, 1.1179rem + 0.2857vw, 1.375rem); /* 19px phone, 22px desktop */
  --type-heading-4-width: 100%;
  --type-heading-4-weight: 600;
  --type-heading-4-tracking: 0em;
  --type-heading-4-leading: 1.25;
  --type-body-lead-size: clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem); /* 18px phone, 20px desktop */
  --type-body-lead-width: 100%;
  --type-body-lead-weight: 400;
  --type-body-lead-tracking: 0em;
  --type-body-lead-leading: 1.45;
  --type-body-size: clamp(1rem, 0.9768rem + 0.0952vw, 1.0625rem); /* 16px phone, 17px desktop */
  --type-body-width: 100%;
  --type-body-weight: 400;
  --type-body-tracking: 0em;
  --type-body-leading: 1.6;
  --type-body-small-size: clamp(0.875rem, 0.8518rem + 0.0952vw, 0.9375rem); /* 14px phone, 15px desktop */
  --type-body-small-width: 100%;
  --type-body-small-weight: 400;
  --type-body-small-tracking: 0.005em;
  --type-body-small-leading: 1.5;
  --type-label-size: clamp(0.75rem, 0.7268rem + 0.0952vw, 0.8125rem); /* 12px phone, 13px desktop */
  --type-label-width: 125%;
  --type-label-weight: 700;
  --type-label-tracking: 0.16em;
  --type-label-leading: 1.2;
  --type-label-small-size: 0.6875rem; /* 11px phone, 11px desktop */
  --type-label-small-width: 125%;
  --type-label-small-weight: 700;
  --type-label-small-tracking: 0.2em;
  --type-label-small-leading: 1.2;
  /* AUTO-style spaced caps, measured from the badge pill. Size it with a label or heading size. */
  --type-badge-caps-width: 125%;
  --type-badge-caps-weight: 800;
  --type-badge-caps-tracking: 0.44em;
  --type-badge-caps-leading: 1;

  /* Space. 4px base. */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 12rem;
  --space-gutter: clamp(1rem, -0.1143rem + 4.5714vw, 4rem); /* Page side padding. 16px on phones, 64px at 1440. */
  --space-section: clamp(4.5rem, 2.4571rem + 8.381vw, 10rem); /* Space between page sections. */
  --space-block: clamp(2rem, 1.2571rem + 3.0476vw, 4rem); /* Space between blocks inside a section. */
  --space-grid-gap: clamp(0.75rem, 0.4714rem + 1.1429vw, 1.5rem); /* Gap in the work grid and card grids. */
  --space-stack-tight: var(--space-2); /* Label to its value, heading to its line. */
  --space-stack: var(--space-4); /* Paragraph to paragraph, field to field. */
  --space-stack-loose: var(--space-6); /* Heading to the content it introduces. */
  --space-control-x: var(--space-5); /* Inline padding inside buttons and inputs. */
  --space-control-y: var(--space-3); /* Block padding inside buttons and inputs. */

  /* Radius. Squared, small. No pill buttons or chips: the pill belongs to the logo. */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-circle: 50%;
  --radius-control: var(--radius-sm);
  --radius-media: var(--radius-sm);
  --radius-panel: var(--radius-md);

  /* Size and border */
  --size-control: 48px;
  --size-touch-min: 44px;
  --size-icon-sm: 16px;
  --size-icon: 20px;
  --size-icon-lg: 24px;
  --size-header: clamp(3.5rem, 3.1286rem + 1.5238vw, 4.5rem);
  --size-layout-max: 1440px;
  --size-measure: 64ch;
  --size-measure-lead: 52ch;
  --size-measure-heading: 18ch;
  --border-hairline: 1px;
  --border-strong: 2px;
  --border-focus-width: 2px;
  --border-focus-offset: 3px;
  --border-link-underline: 2px;
  --border-link-underline-offset: 0.18em;

  /* Motion. Smooth ease-out, no bounce, no spring, no overshoot. */
  --motion-duration-instant: 100ms; /* Press feedback. */
  --motion-duration-fast: 180ms; /* Hover color and opacity, focus ring in. */
  --motion-duration-base: 320ms; /* Menus, small panels, video hover crossfade. */
  --motion-duration-slow: 560ms; /* Reveals on enter. */
  --motion-duration-slower: 900ms; /* Page wipes, landing elements moving into place. */
  --motion-duration-intro: 1400ms; /* Landing intro: headline in, 3D camera settle. */
  --motion-duration-logo: 2400ms; /* Logo reveal. Once per session. */
  --motion-duration-ambient: 24000ms; /* One full idle cycle of the landing 3D. Linear, loops. */
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* GSAP power4.out. Default. Anything entering or responding to the pointer. */
  --motion-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* GSAP expo.out. Long glide for big moments: display type in, 3D camera settle, logo reveal. */
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* GSAP power2.inOut. Something traveling from A to B on screen: carousels, camera moves. */
  --motion-ease-in-out-strong: cubic-bezier(0.83, 0, 0.17, 1); /* GSAP power4.inOut. Page wipes and full-screen transitions. */
  --motion-ease-in: cubic-bezier(0.5, 0, 0.75, 0); /* GSAP power3.in. Exits. Use about 0.7x the matching enter duration. */
  --motion-ease-linear: linear;
  --motion-stagger: 70ms;
  --motion-stagger-max: 490ms;
  --motion-distance-reveal: 16px;
  --motion-scale-media-hover: 1.02;
  --motion-ambient-state: running;
}

/* Roles. Dark is the site default. */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--gist-ink);
  --color-bg-brand: var(--gist-navy);
  --color-bg-media: var(--gist-charcoal);
  --color-surface: var(--gist-navy);
  --color-surface-raised: var(--gist-navy);
  --color-text: var(--gist-cream);
  --color-text-muted: var(--gist-steel);
  --color-text-disabled: var(--gist-haze);
  --color-line: rgb(var(--gist-cream-rgb) / 0.14);
  --color-line-strong: var(--gist-haze);
  --color-accent: var(--gist-orange);
  --color-accent-text: var(--gist-orange-light);
  --color-action: var(--gist-orange);
  --color-action-hover: var(--gist-orange-light);
  --color-on-action: var(--gist-ink);
  --color-link: var(--gist-cream);
  --color-link-underline: var(--gist-orange);
  --color-focus: var(--gist-orange);
  --color-error: var(--gist-error-dark);
  --color-selection-bg: var(--gist-orange);
  --color-selection-text: var(--gist-ink);
}

/* Navy brand field. Small orange text switches to orange-light here (orange on navy is only 4.38:1). */
[data-theme="brand"] {
  color-scheme: dark;
  --color-bg: var(--gist-navy);
  --color-bg-brand: var(--gist-navy);
  --color-bg-media: var(--gist-charcoal);
  --color-surface: var(--gist-ink);
  --color-surface-raised: var(--gist-ink);
  --color-text: var(--gist-cream);
  --color-text-muted: var(--gist-steel);
  --color-text-disabled: var(--gist-haze);
  --color-line: rgb(var(--gist-cream-rgb) / 0.14);
  --color-line-strong: var(--gist-haze);
  --color-accent: var(--gist-orange);
  --color-accent-text: var(--gist-orange-light);
  --color-action: var(--gist-orange);
  --color-action-hover: var(--gist-orange-light);
  --color-on-action: var(--gist-ink);
  --color-link: var(--gist-cream);
  --color-link-underline: var(--gist-orange);
  --color-focus: var(--gist-orange);
  --color-error: var(--gist-error-dark);
  --color-selection-bg: var(--gist-orange);
  --color-selection-text: var(--gist-ink);
}

/* Charcoal, for footage, players and the work grid. */
[data-theme="media"] {
  color-scheme: dark;
  --color-bg: var(--gist-charcoal);
  --color-bg-brand: var(--gist-navy);
  --color-bg-media: var(--gist-charcoal);
  --color-surface: var(--gist-ink);
  --color-surface-raised: var(--gist-navy);
  --color-text: var(--gist-cream);
  --color-text-muted: var(--gist-steel);
  --color-text-disabled: var(--gist-haze);
  --color-line: rgb(var(--gist-cream-rgb) / 0.14);
  --color-line-strong: var(--gist-haze);
  --color-accent: var(--gist-orange);
  --color-accent-text: var(--gist-orange-light);
  --color-action: var(--gist-orange);
  --color-action-hover: var(--gist-orange-light);
  --color-on-action: var(--gist-ink);
  --color-link: var(--gist-cream);
  --color-link-underline: var(--gist-orange);
  --color-focus: var(--gist-orange);
  --color-error: var(--gist-error-dark);
  --color-selection-bg: var(--gist-orange);
  --color-selection-text: var(--gist-ink);
}

/* Light: documents, print, light sections. Orange is never text here; primary buttons go navy. */
[data-theme="light"] {
  color-scheme: light;
  --color-bg: var(--gist-cream);
  --color-bg-brand: var(--gist-navy);
  --color-bg-media: var(--gist-charcoal);
  --color-surface: var(--gist-paper);
  --color-surface-raised: var(--gist-paper);
  --color-text: var(--gist-navy);
  --color-text-muted: var(--gist-slate);
  --color-text-disabled: var(--gist-haze);
  --color-line: rgb(var(--gist-navy-rgb) / 0.16);
  --color-line-strong: var(--gist-haze);
  --color-accent: var(--gist-orange);
  --color-accent-text: var(--gist-navy);
  --color-action: var(--gist-navy);
  --color-action-hover: var(--gist-ink);
  --color-on-action: var(--gist-cream);
  --color-link: var(--gist-navy);
  --color-link-underline: var(--gist-orange);
  --color-focus: var(--gist-navy);
  --color-error: var(--gist-error-light);
  --color-selection-bg: var(--gist-navy);
  --color-selection-text: var(--gist-cream);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant: 0ms;
    --motion-duration-fast: 0ms;
    --motion-duration-base: 160ms;
    --motion-duration-slow: 160ms;
    --motion-duration-slower: 160ms;
    --motion-duration-intro: 160ms;
    --motion-duration-logo: 0ms;
    --motion-stagger: 0ms;
    --motion-stagger-max: 0ms;
    --motion-distance-reveal: 0px;
    --motion-scale-media-hover: 1;
    --motion-ambient-state: paused;
  }
}