/* Apple Entertainment — Semantic tokens
   Human-friendly aliases mapped onto the raw Figma variables in
   fig-tokens.css. Prefer these in components. */
:root{
  /* Brand */
  --brand-red: var(--primary-red-500-main);          /* #B41A18 */
  --brand-red-hover: var(--primary-red-900);          /* #4D0000 deep maroon */
  --brand-red-accent: var(--primary-red-accent-500-main); /* #E62324 */
  --brand-pink: var(--primary-pink-200-main);         /* #FAE6E6 */
  --brand-pink-soft: var(--primary-pink-50);          /* #FFF2F2 */

  /* Ink / surface */
  --ink: #1A1A1A;                 /* near-black brand background (alpha-light-1000) */
  --ink-900: #292D32;             /* dominant text (Iconsax slate) */
  --surface-page: #FFFFFF;
  --surface-raised: var(--gray-50);       /* #F9FAFB */
  --surface-muted: var(--gray-100);       /* #F3F4F6 */
  --surface-invert: #1A1A1A;

  /* Text */
  --text-strong: #1A1A1A;
  --text-body: #292D32;
  --text-muted: var(--gray-600);          /* #4B5563 */
  --text-subtle: var(--gray-500);         /* #6B7280 */
  --text-invert: #FFFFFF;
  --text-brand: var(--brand-red);

  /* Lines */
  --border: var(--gray-200);              /* #E5E7EB */
  --border-strong: var(--gray-300);       /* #D1D5DB */
  --border-invert: rgba(255,255,255,0.16);

  /* Type families */
  --font-display: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body: "Lora", ui-serif, Georgia, "Times New Roman", serif;
  --font-ui: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-meta: "Inter", "Manrope", -apple-system, sans-serif;

  /* Radii (px) */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-pop: 0 12px 40px rgba(0,0,0,0.18);
  --shadow-poster: 0 20px 60px rgba(0,0,0,0.35);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(180,26,24,0.32);
}

a{ color: var(--brand-red); text-decoration: none; }
a:hover{ color: var(--brand-red-hover); }