/*
 * Design tokens — extracted from the reference implementation (roadmap.md Phase 0.1):
 * static/css/_filter_section.css, _filter_toggle.css, _tab_toggle.css, film.css, filmdetail.css.
 * No visual changes: this file only names values already in use there.
 *
 * Linked from templates/base.html, before base.css, so it's live on every page (small
 * head start on Phase 1's base.html rebuild — done now to host the SwitzerVariable
 * @font-face below without duplicating it). Phase 1 still drops the redundant :root
 * blocks currently duplicated in film.css and filmdetail.css.
 */

@font-face {
  font-family: 'SwitzerVariable';
  src: url(../fonts/Switzer/Switzer-Variable.eot);
  src: url(../fonts/Switzer/Switzer-Variable.eot?#iefix) format('embedded-opentype'),
    url(../fonts/Switzer/Switzer-Variable.woff2) format('woff2'),
    url(../fonts/Switzer/Switzer-Variable.woff) format('woff'),
    url(../fonts/Switzer/Switzer-Variable.ttf) format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'SwitzerVariableItalic';
  src: url(../fonts/Switzer/Switzer-VariableItalic.eot);
  src: url(../fonts/Switzer/Switzer-VariableItalic.eot?#iefix) format('embedded-opentype'),
    url(../fonts/Switzer/Switzer-VariableItalic.woff2) format('woff2'),
    url(../fonts/Switzer/Switzer-VariableItalic.woff) format('woff'),
    url(../fonts/Switzer/Switzer-VariableItalic.ttf) format('truetype');
  font-weight: 100 900;
  font-style: italic;
}
/* Moved from base.css — this is the only Switzer weight actually consumed anywhere
   (35 uses of 'SwitzerVariable' across the reference CSS). base.css still declares 13
   other named-weight Switzer faces (SwitzerBold, SwitzerLight, etc.) and
   'SwitzerVariableItalic' has no consumer either — none of those are referenced by any
   font-family rule outside their own @font-face block. Candidate for Phase 2 dead-weight
   removal; left alone for now since that's a bigger call than moving what's confirmed live. */

:root {
  /* ---- Color ----
     Names match the vars already declared (identically) in film.css and filmdetail.css,
     kept as-is so those files can switch to consuming tokens.css with zero renaming. */
  --off-white: #FBF9F2;              /* confirmed against Figma — matches the reference CSS exactly (case aside) */
  --green-grey: #9CB9A9;
  --green-grey-low-light: #9CB9A94D; /* green-grey @ ~30% opacity — soft dividers, active-state fills */
  --green-hover: #E7FFF233;          /* ~20% opacity hover fill */
  --black: #121D17;
  --black-70: #121D17B3;             /* black @ 70% opacity — secondary text */
  --hamaca-red: #F6323E;             /* confirmed canonical. The legacy stylesheets (base.css, estils.css)
                                         use #f7323f instead — a near-identical but not equal hex
                                         (247,50,63 vs 246,50,62), an artifact of the old no-git,
                                         copy-and-rename workflow, not a deliberate second color.
                                         Treat #f7323f as superseded wherever Phase 3 replaces it. */

  /* ---- Motion ---- */
  --slide-animation-time: 0.5s;  /* already a named var in the reference CSS — panel/view slide transitions */
  --transition-fast: 0.3s ease;  /* not yet named there, but used identically ~6x for hover/toggle states */

  /* ---- Typography ---- */
  --font-family-base: 'SwitzerVariable', sans-serif; /* no fallback is ever declared in the reference
                                                         CSS today — added here since the @font-face
                                                         block (base.css) has no associated fallback */

  /* Type scale: at every size below, line-height is a fixed 1.32x multiple of font-size.
     Kept as explicit pairs (not computed) so Phase 1 primitives can spot the pattern without
     relying on calc() chains; new sizes should keep following the 1.32x ratio unless Figma says otherwise. */
  --font-size-h1: 45px;    --line-height-h1: 59.4px;    /* h1.neu */
  --font-size-h2: 27px;    --line-height-h2: 35.64px;   /* h2.neu; filter-category-1 button-text */
  --font-size-h3: 18px;    --line-height-h3: 23.76px;   /* h3.neu; tab-button; toggle-option (uppercase, letter-spacing-label) */
  --font-size-body: 19px;  --line-height-body: 25.08px; /* p1-neu; option-name; search input text */
  --font-size-small: 16px; --line-height-small: 21.12px;/* p2-neu; filter-count; option-count */
  --font-size-micro: 14px; --line-height-micro: 18.48px;/* active-filter-category h3; filter chip labels (uppercase, letter-spacing-label) */

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

  --letter-spacing-copy: 0.01em;  /* body copy and headings */
  --letter-spacing-label: 0.06em; /* uppercase UI chrome: tabs, toggle labels, filter chips */

  /* ---- Spacing ----
     Nearly every margin/padding value in the reference CSS is a multiple of 5px — treated here
     as a scale. A handful of values don't fit (11px, 17px, 23px, 28px, 41px, 87px) and are left
     alone rather than silently rounded; confirm against Figma before deciding whether those are
     intentional or drift. */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 25px;
  --space-6: 30px;
  --space-7: 40px;
  --space-8: 50px;
  --space-9: 60px;

  /* ---- Border & radius ----
     `1px solid var(--green-grey)` is the dominant border everywhere in the reference implementation;
     `var(--green-grey-low-light)` is used for softer/secondary dividers. The design is intentionally
     square-cornered: no rounded-rect radius scale exists anywhere — only fully circular controls
     (radio buttons). Confirm this is deliberate (not an oversight) when Figma access lands. */
  --border-width: 1px;
  --radius-none: 0;
  --radius-round: 50%;

  /* ---- Layout / breakpoints ----
     The reference CSS used to repeat a 3-tier scale plus an empty 4th "huge screens" tier; all of
     those tiers were removed, and the desktop tier is now uncapped from 1200px.
     NOTE: custom properties can't be used inside @media feature values in plain CSS (no build
     step here to polyfill it) — these exist as documentation/reference constants, not literal
     substitutes for the numbers inside @media rules. */
  --breakpoint-tablet: 450px;
  --breakpoint-desktop: 1200px;
  --content-width-desktop: 1140px; /* fixed-width centered column, not fluid/max-width */

  /* ---- Detail layout ---- */
  --detail-gutter-left: 10px;   /* film detail page: left margin of the folder column */
  --detail-gutter-right: 44px;  /* film detail page: right margin / decoration column width */
}

/* Dark variant: swaps the two base colours (off-white <-> black, incl. the 70% black),
   so components built from these tokens invert without per-component dark rules. */
.theme-dark {
  --off-white: #121D17;
  --black: #FBF9F2;
  --black-70: #FBF9F2B3;
}