/**
 * USA Children's International Film Festival
 * Centralized Design Tokens (Figma Exact Values)
 */

@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Outfit:wght@400;500;600;700&family=Playfair+Display:ital@0;1&display=swap');

:root {
  /* Brand Primary Colors */
  --color-bg: #F8F8F5;              /* Light stone base */
  --color-bg-alt: #F2F2ED;          /* Slightly deeper stone */
  --color-bg-card: #FFFFFF;         /* Crisp surface */
  --color-bg-dark: #10151A;         /* Dark editorial footer & section headers */
  --color-bg-dark-card: #181F26;    /* Dark card surface */

  /* Text Colors */
  --color-text: #1C2328;            /* Primary dark text */
  --color-text-muted: #5E6A70;      /* Muted gray body */
  --color-text-dim: rgba(28, 35, 40, 0.7);
  --color-text-light: #F8F8F5;      /* Inverted light text */
  --color-text-light-muted: rgba(248, 248, 245, 0.7);

  /* Signature Accents */
  --color-teal: #0E8F93;            /* Primary teal branding */
  --color-teal-light: #2CB7B0;      /* Vibrant hover / interactive teal */
  --color-teal-tint: rgba(14, 143, 147, 0.12);
  --color-teal-hover: #0b7376;

  /* Signature Gold */
  --color-gold: #E0B000;            /* CTA background */
  --color-gold-border: #C9A227;     /* Gold button & badge border */
  --color-gold-light: #FFCB0D;      /* Golden wolf highlight */
  --color-gold-tint: rgba(224, 176, 0, 0.15);

  /* Borders & Hairlines */
  --color-border: #E8ECEC;          /* Hairline divider */
  --color-border-dark: rgba(255, 255, 255, 0.12);
  --color-border-light: rgba(28, 35, 40, 0.08);

  /* Typography */
  --font-main: 'Arimo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'Arimo', serif;
  --font-accent: 'Outfit', sans-serif;

  /* Containers & Spacing */
  --container-max: 1400px;
  --container-content: 1320px;
  --header-height: 82px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-gold: 0 8px 24px rgba(224, 176, 0, 0.25);
  --shadow-teal: 0 8px 24px rgba(14, 143, 147, 0.25);

  /* Transitions & Motion (Matching WhyNotNow Motion System) */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.25s;
  --duration-medium: 0.4s;
  --duration-slow: 0.85s;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}