/* FLATTENED design-system CSS, generated for the ad landing pages.
 * The DS ships 7 files (styles.css @imports six token files), which on a phone is a
 * chain of blocking round trips for 6KB of CSS - Lighthouse attributed ~2.2s of
 * render-blocking to it. Same bytes, one request. Regenerate with the LP build; do not
 * hand-edit. Google Fonts @import is hoisted to the top - @import must precede rules. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');

/* ==== tokens/fonts.css ==== */
/* Film Camp webfonts.
   SUBSTITUTIONS — no licensed binaries were provided:
   Sohne              -> Inter        (grotesque UI face)
   Sohne Schmal       -> Oswald       (condensed display)
   Ivar Display Cond. -> Playfair Display (editorial serif)
   Replace these @import + family names when licensed files arrive. */

/* ==== tokens/colors.css ==== */
:root{
  /* Base palette */
  --color-obsidian:#222326;
  --color-carbon:#0d0d0e;
  --color-charcoal-plate:#272c33;
  --color-slate-body:#191c21;
  --color-bone-white:#f4f4f5;
  --color-ash-mute:#9ea0a9;
  --color-smoke:#43454c;
  --color-paper:#ffffff;
  --color-magenta-spotlight:#e32652;
  --color-editorial-gold:#eed37f;
  --color-camp-yellow:#ffd600;
  /* Logo artwork only — the clapperboard red. Never a UI accent. */
  --color-reel-red:#8b0000;

  /* Semantic — text */
  --text-primary:var(--color-paper);
  --text-secondary:var(--color-bone-white);
  --text-muted:var(--color-ash-mute);
  --text-on-accent:var(--color-paper);
  --text-on-yellow:var(--color-carbon);

  /* Semantic — surfaces */
  --surface-canvas:var(--color-obsidian);
  --surface-panel:var(--color-carbon);
  --surface-card:var(--color-charcoal-plate);
  --surface-nested:var(--color-slate-body);
  --surface-inactive:var(--color-smoke);
  --surface-video:#000000;

  /* Semantic — action */
  --action-primary:var(--color-magenta-spotlight);
  --action-primary-hover:#c81f46;
  --action-primary-press:#ab1a3b;
  --action-accent:var(--color-editorial-gold);
  --action-stamp:var(--color-camp-yellow);

  /* Semantic — borders */
  --border-hairline:rgba(244,244,245,0.2);
  --border-plate:var(--color-charcoal-plate);
  --border-strong:var(--color-paper);
  --border-mute:var(--color-ash-mute);
  --border-gold:var(--color-editorial-gold);
}

/* ==== tokens/typography.css ==== */
:root{
  --font-sohne:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-sohne-schmal:'Oswald','Inter Tight',ui-sans-serif,system-ui,sans-serif;
  --font-ivar-display-condensed:'Playfair Display',ui-serif,Georgia,serif;

  --font-body:var(--font-sohne);
  --font-display:var(--font-sohne-schmal);
  --font-editorial:var(--font-ivar-display-condensed);

  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;

  --text-micro:8px;   --leading-micro:1;    --tracking-micro:0.04em;
  --text-caption:12px;--leading-caption:1.5;--tracking-caption:0.012em;
  --text-body-sm:14px;--leading-body-sm:1.45;--tracking-body-sm:0.01em;
  --text-body:16px;   --leading-body:1.5;   --tracking-body:0.01em;
  --text-subheading:20px;--leading-subheading:1.33;--tracking-subheading:0.02em;
  --text-heading-sm:24px;--leading-heading-sm:1.25;--tracking-heading-sm:0.023em;
  --text-heading:32px;--leading-heading:1.25;--tracking-heading:0.027em;
  --text-heading-lg:48px;--leading-heading-lg:1.1;--tracking-heading-lg:0.039em;
  --text-display-sm:64px;--leading-display-sm:0.9;--tracking-display-sm:0.01em;
  --text-display:80px;--leading-display:0.85;--tracking-display:-0.01em;
  --font-features:"ss01" on,"cv11" on;
}

/* ==== tokens/spacing.css ==== */
:root{
  --spacing-unit:4px;
  --spacing-4:4px;--spacing-8:8px;--spacing-12:12px;--spacing-16:16px;
  --spacing-20:20px;--spacing-24:24px;--spacing-32:32px;--spacing-48:48px;
  --spacing-64:64px;--spacing-80:80px;--spacing-96:96px;--spacing-112:112px;

  --page-max-width:1280px;
  --section-gap:80px;
  --section-gap-tight:64px;
  --card-padding:24px;
  --card-padding-tight:16px;
  --element-gap:16px;
  --element-gap-tight:12px;
}

/* ==== tokens/shape.css ==== */
:root{
  --radius-md:4px;--radius-lg:8px;--radius-xl:12px;--radius-2xl:16px;--radius-pill:20px;--radius-full:48px;
  --radius-tags:var(--radius-pill);
  --radius-badges:var(--radius-pill);
  --radius-cards:var(--radius-xl);
  --radius-images:var(--radius-xl);
  --radius-inputs:var(--radius-md);
  --radius-buttons:var(--radius-lg);
  --radius-buttons-pill:var(--radius-full);

  /* Elevation is expressed as INSET hairlines only — never drop shadows. */
  --shadow-subtle:rgb(148,154,164) 0px 0px 0px 2px inset;
  --shadow-subtle-2:rgb(39,44,51) 0px 0px 0px 1px inset;
  --shadow-subtle-3:rgb(67,69,76) 0px 0px 0px 2px inset;
  --shadow-subtle-4:rgb(148,154,164) 0px 0px 0px 1px inset;

  --elevation-card:var(--shadow-subtle-2);
  --elevation-input:var(--shadow-subtle-4);
  --elevation-input-focus:var(--shadow-subtle);
  --elevation-active:var(--shadow-subtle-3);

  --motion-fast:120ms; /* @kind other */
  --motion-base:200ms; /* @kind other */
  --motion-slow:400ms; /* @kind other */
  --ease-standard:cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --ease-exit:cubic-bezier(0.4,0,1,1); /* @kind other */
}

/* ==== tokens/base.css ==== */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--surface-canvas);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body);font-feature-settings:var(--font-features)}
*,*::before,*::after{box-sizing:border-box}
h1,h2,h3,h4,h5,h6,p{margin:0}
img{display:block;max-width:100%}
a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--border-hairline);transition:color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard)}
a:hover{color:var(--color-editorial-gold);border-bottom-color:var(--color-editorial-gold)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--color-editorial-gold);outline-offset:2px}
::selection{background:var(--color-magenta-spotlight);color:var(--color-paper)}
::placeholder{color:var(--text-muted)}