/* Design tokens — extracted from Figma "Istorii cu Cașcaval" */

:root {
  /* Brand palette */
  --c-dark: #232323;          /* primary dark canvas */
  --c-ink: #323232;           /* dark text / dark cards / button label */
  --c-gold: #f9b200;          /* primary CTA + accent */
  --c-cream: #ddd7cc;         /* light card surface */
  --c-peach: #f5b49b;         /* secondary accent (nav pills, lang switch) */
  --c-white: #ffffff;

  --c-ink-60: rgba(50, 50, 50, 0.6);
  --c-dark-60: rgba(35, 35, 35, 0.6);
  --c-white-60: rgba(255, 255, 255, 0.6);
  --c-white-70: rgba(255, 255, 255, 0.7);
  --c-peach-32: rgba(245, 180, 155, 0.32);
  --c-peach-10: rgba(245, 180, 155, 0.1);

  --c-gold-text: #ffb000;     /* gold used as type colour, not fill */
  --c-success: #02b6c9;       /* "Da, dacă" check icons */
  --c-error: #df1566;         /* "Nu, dacă" cross icons */

  /* Typography */
  --font-display: 'Kurale', 'Times New Roman', Georgia, serif;
  --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-deco: 'Berkshire Swash', Georgia, 'Times New Roman', serif;

  /*
   * Layout.
   * The Figma canvas is a fixed 1440 (1200 content + 120 gutters). Held
   * literally, a 1920 screen ends up with ~360px of dead margin either side,
   * so both the page cap and the gutter scale with the viewport instead: the
   * content keeps the designed proportions but stops stranding the edges.
   */
  --page-max: 1680px;
  --gutter: clamp(20px, 4vw, 80px);

  --radius-section: 32px;
  --radius-card: 24px;
  --radius-btn: 12px;
  --radius-pill: 6px;

  /*
   * Vertical rhythm. Two steps, not one: sections that continue a thought sit
   * closer than sections that start one, so the page has a cadence instead of
   * one repeated interval.
   */
  --section-pt: clamp(56px, 6vw, 88px);
  --section-pb: clamp(48px, 5vw, 72px);
  --section-pt-lead: clamp(72px, 7.5vw, 112px);  /* opening a new movement */
  --section-gap-tight: clamp(32px, 3.5vw, 52px); /* mid-thought continuation */

  /*
   * The cheese pattern's tile, at the size Figma draws it. pattern.svg is one
   * 718x1164 unit, exported from the corrected pattern in the Figma file, so
   * the repeat cell is the tile itself. Measured against the Figma frames
   * rather than chosen: the design repeats every 718px at a 1440px viewport,
   * two wedge columns across the screen. Rescale this and the pattern is wrong.
   */
  --pattern-tile: 718px 1164px;

  /*
   * Motion — one language, so nothing feels borrowed from elsewhere.
   *
   * Two easings, because they do different jobs:
   *
   * --ease-out is a near-expo curve: it puts 83% of the movement into the
   * first quarter of the duration and reaches 90% at a third of it. That snap
   * is exactly right for a control answering a pointer — a hover, a button —
   * where any delay reads as lag.
   *
   * It is wrong for something arriving on screen. Used there, a "720ms" fade
   * is perceptually a ~240ms fade followed by half a second of invisible
   * tail, which is why the reveals read as rushed no matter how far the
   * duration was pushed. --ease-entrance (easeOutCubic) spends the time it is
   * given: 90% of the movement at 54% of the duration, so raising the number
   * actually slows what the eye sees.
   */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* controls answering input */
  --ease-entrance: cubic-bezier(0.33, 1, 0.68, 1); /* things arriving on screen */

  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 720ms;
  --dur-reveal: 980ms;
  --dur-word: 620ms;   /* gold word cross-fade */
}

@media (max-width: 767px) {
  :root {
    --radius-section: 24px;
  }
}