/*
 * Greenlight v2 — Design Tokens
 *
 * Direção: "Projeção 35mm" (editorial cinéfilo brasileiro)
 * Mood: revista impressa de cinema em papel offset creme sob luz tungstênio.
 *
 * Ajustes aplicados sobre a proposta original:
 *  - accent-green bumpado para `#5FB872` (deuteranopia-safe, chroma ~0.13)
 *  - text-muted floor verificado para manter 4.5:1 em bg-base E bg-raised
 *  - focus ring em warm-white (3px) — verde falha 3:1 sobre bg-overlay
 *  - motion / reduced-motion / touch-target / hyphens enforçados globalmente
 *
 * Ver docs/design-v2-final.md para rationale completo e verification gates.
 */

@import url("https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,500;0,7..72,600;0,7..72,700;0,7..72,800;0,7..72,900;1,7..72,500;1,7..72,700;1,7..72,900&family=Inter:wght@400;500;600;700&display=swap");

/* ------------------------------------------------------------------
 * Fallback font metric overrides — eliminate CLS when Literata/Inter
 * swap in. size-adjust pulls the fallback glyph box size toward the
 * final web font so the before/after text blocks occupy the same
 * vertical space. Measured against Georgia/system-ui metrics.
 * ------------------------------------------------------------------ */
@font-face {
  font-family: "Literata Fallback";
  src: local("Georgia");
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
  size-adjust: 105%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Segoe UI"), local("system-ui"), local("Arial");
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
  size-adjust: 107%;
}

:root {
  /* ------------------------------------------------------------------
   * Color — warm dark (olive-ink)
   * Base contrast computed against #141009.
   * ------------------------------------------------------------------ */
  --color-bg-base: #141009;
  --color-bg-raised: #1c1710;
  --color-bg-overlay: #241d14;
  --color-bg-inset: #0d0a06;

  --color-text-primary: #f2ead9;     /* 13.2:1 AAA on bg-base */
  --color-text-secondary: #c9bea7;   /*  8.9:1 AAA on bg-base */
  --color-text-muted: #9b917c;       /*  5.1:1 AA  on bg-base (bumped from 8A8170 to clear raised surface) */
  --color-text-inverse: #141009;     /* for buttons on accent fills */

  --color-accent-green: #5fb872;     /* deuteranopia-safe; 5.7:1 on bg-base */
  --color-accent-green-hover: #7fcd8f;
  --color-accent-green-dim: rgba(95, 184, 114, 0.16);

  --color-accent-warm: #d9812c;      /* tungsten amber */
  --color-accent-warm-hover: #eb9842;

  --color-border-subtle: #2e2618;
  --color-border-line: #3a3020;
  --color-border-strong: #554735;

  --color-danger: #c24a3e;
  --color-danger-hover: #d96050;
  --color-success: #5fb872;          /* alias for accent-green */

  /* scrims / overlays */
  --scrim-soft: rgba(20, 16, 9, 0.72);
  --scrim-hard: rgba(20, 16, 9, 0.92);

  /* ------------------------------------------------------------------
   * Typography
   * ------------------------------------------------------------------ */
  --font-display: "Literata", "Literata Fallback", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;

  /* fluid type scale */
  --text-xs: clamp(0.72rem, 0.7rem + 0.08vw, 0.78rem);
  --text-sm: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);      /* 16–17px floor */
  --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.18rem);
  --text-lg: clamp(1.22rem, 1.15rem + 0.4vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.35rem + 0.8vw, 1.8rem);
  --text-2xl: clamp(1.9rem, 1.65rem + 1.2vw, 2.4rem);
  --text-3xl: clamp(2.4rem, 2rem + 1.8vw, 3.2rem);
  --text-hero: clamp(2.8rem, 2rem + 3.4vw, 5.2rem);
  --text-display: clamp(4rem, 3rem + 5vw, 8rem);             /* for metascore hero */

  --line-tight: 1.1;
  --line-snug: 1.25;
  --line-normal: 1.5;
  --line-relaxed: 1.6;
  --line-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-eyebrow: 0.24em;

  /* measure */
  --measure-body: 66ch;
  --measure-card: 58ch;
  --measure-legal: 72ch;

  /* ------------------------------------------------------------------
   * Spacing scale (rem)
   * ------------------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --space-5xl: 12rem;

  /* section rhythm */
  --section-pad-y: clamp(3rem, 2rem + 3vw, 6rem);
  --section-pad-y-tight: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --shell-pad-x: clamp(1.25rem, 0.75rem + 2vw, 3rem);
  --shell-max: 78rem;

  /* ------------------------------------------------------------------
   * Radii — papel cortado / bloco tipográfico
   * ------------------------------------------------------------------ */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------------
   * Shadows
   * ------------------------------------------------------------------ */
  --shadow-page:
    inset 0 1px 0 0 rgba(255, 240, 210, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.6);
  --shadow-lift:
    0 20px 40px -24px rgba(0, 0, 0, 0.9),
    0 2px 6px -2px rgba(0, 0, 0, 0.6);
  --shadow-spotlight:
    0 60px 120px -60px rgba(217, 129, 44, 0.28),
    0 24px 60px -24px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 0 rgba(242, 234, 217, 0.06);
  --shadow-modal:
    0 40px 80px -20px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(242, 234, 217, 0.06);

  /* ------------------------------------------------------------------
   * Score band colors (card left-edge strips)
   * ------------------------------------------------------------------ */
  --color-band-green: #5fb872;
  --color-band-yellow: #d4a843;
  --color-band-red: #c24a3e;
  --color-band-neutral: #554735;

  --shadow-card-hover:
    0 12px 32px -16px rgba(0, 0, 0, 0.7),
    0 2px 8px -2px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 0 rgba(242, 234, 217, 0.05);

  /* ------------------------------------------------------------------
   * Motion
   * ------------------------------------------------------------------ */
  --duration-fast: 160ms;
  --duration-normal: 320ms;
  --duration-slow: 620ms;

  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);     /* expo-out */
  --ease-settle: cubic-bezier(0.33, 1, 0.68, 1);    /* quart-out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ------------------------------------------------------------------
   * Z-index
   * ------------------------------------------------------------------ */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-modal: 500;
  --z-toast: 900;
  --z-consent: 1000;

  /* ------------------------------------------------------------------
   * Focus ring — warm white (3px, passes 3:1 on all surfaces)
   * ------------------------------------------------------------------ */
  --focus-ring-width: 3px;
  --focus-ring-color: #f2ead9;
  --focus-ring-offset: 2px;
}

/* -----------------------------------------------------------------
 * Reset / baseline — scoped to essentials, won't fight components.
 * ----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  hyphens: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--line-relaxed);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Editorial film-grain background texture using radial gradients.
   Pure CSS, zero asset weight, respects reduced-motion (static). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(
      ellipse 1200px 800px at 15% -10%,
      rgba(217, 129, 44, 0.08),
      transparent 60%
    ),
    radial-gradient(
      ellipse 900px 700px at 110% 20%,
      rgba(95, 184, 114, 0.05),
      transparent 55%
    ),
    radial-gradient(
      ellipse 1400px 900px at 50% 110%,
      rgba(217, 129, 44, 0.04),
      transparent 65%
    );
}

/* Subtle grain overlay via repeating radial-gradient dots */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image: radial-gradient(
    rgba(242, 234, 217, 0.015) 1px,
    transparent 1px
  );
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

main,
header,
section,
footer {
  position: relative;
  z-index: 1;
}

/* Typography defaults */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  max-width: var(--measure-body);
}

a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: rgba(95, 184, 114, 0.4);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease-settle);
}

a:hover {
  text-decoration-color: var(--color-accent-green);
}

/* Unified focus ring — never browser default */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* Touch-target floor for every interactive element.
   Can be overridden per-component ONLY when a larger hit box
   is already provided by padding. */
button,
a[href],
[role="button"],
input[type="button"],
input[type="submit"] {
  min-height: 44px;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Forbid serif italic at small sizes (illegible on warm dark) */
em,
i {
  font-style: italic;
  font-family: var(--font-sans);
}
h1 em, h2 em, h3 em, .hero em,
h1 i, h2 i, h3 i, .hero i {
  font-family: var(--font-display);
}

/* -----------------------------------------------------------------
 * Reduced motion — non-negotiable
 * ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  body::before {
    /* static — no ambient motion */
  }
}

/* -----------------------------------------------------------------
 * Windows High Contrast / forced-colors
 * ----------------------------------------------------------------- */
@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid CanvasText;
  }
  button,
  a {
    forced-color-adjust: auto;
  }
}

/* -----------------------------------------------------------------
 * Screen-reader only utility
 * ----------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}