/**
 * Italy Made Easy — Design Tokens
 * Source of truth: pai-core/brand/design-tokens.md
 * ALL values come from here. Never hardcode in any other CSS file.
 * If a value you need isn't here — ADD IT HERE FIRST, then use the variable.
 */

:root {

  /* ─── Colors ─────────────────────────────────────────── */
  --color-blue:       #0090FF;   /* Primary — CTAs, buttons, links */
  --color-pink:       #E93D82;   /* Secondary — accents, gradient pair */
  --color-yellow:     #F7DE15;   /* Tertiary — rare small accents only */
  --color-green:      #00A878;   /* Success / positive states */
  --color-red:        #A5275A;   /* Error / destructive actions */
  --color-bg:         #FBFDFF;   /* Page background */
  --color-text:       #1C3447;   /* Primary text */
  --color-white:      #FFFFFF;
  --color-blue-tint:  #DDEFFF;   /* Ghirigori on light backgrounds */
  --color-pink-tint:  #FFE0EB;   /* Ghirigori on pink zones */
  --color-border:     #E8E8E8;   /* Dividers, separators */
  --color-muted:      #64748B;   /* Secondary / caption text */
  --color-blue-1:     #F0F8FF;   /* Lightest blue — subtle backgrounds */
  --color-gold:       #F5A623;   /* Star ratings, review scores */

  /* ─── RGB Triplets (for rgba() with variable opacity) ── */
  --color-blue-rgb:   0, 144, 255;
  --color-pink-rgb:   233, 61, 130;
  --color-green-rgb:  0, 168, 120;
  --color-text-rgb:   28, 52, 71;
  --color-white-rgb:  255, 255, 255;

  /* ─── Phase Colors (Fluency Path phases) ────────────── */
  --color-phase-1:     #0090FF;   /* Foundation — same as --color-blue */
  --color-phase-1-rgb: 0, 144, 255;
  --color-phase-2:     #00A878;   /* Progression — same as --color-green */
  --color-phase-2-rgb: 0, 168, 120;
  --color-phase-3:     #F76B15;   /* Evolution */
  --color-phase-3-rgb: 247, 107, 21;
  --color-phase-4:     #E93D82;   /* Confidence — same as --color-pink */
  --color-phase-4-rgb: 233, 61, 130;
  --color-phase-5:     #8E4EC6;   /* Mastery */
  --color-phase-5-rgb: 142, 78, 198;

  /* ─── Italian Tricolor (canonical) ─────────────────── */
  --color-italia-green: #009246;
  --color-italia-white: #FFFFFF;
  --color-italia-red:   #CE2B37;

  /* ─── Gradients ──────────────────────────────────────── */
  --grad-primary: linear-gradient(135deg, #0090FF, #E93D82);
  /* ^ Signature blue→pink — LOCKED. Use for hero CTAs and key highlights. */

  --grad-subtle:  linear-gradient(135deg, rgba(0,144,255,0.06), rgba(233,61,130,0.06));
  /* ^ 6% opacity — atmospheric section backgrounds */

  --grad-warm:    linear-gradient(135deg, #E93D82, #F7DE15);
  /* ^ Pink→yellow sunset gradient */

  --grad-italia:  linear-gradient(90deg, var(--color-italia-green) 0%, var(--color-italia-green) 28%, #ffffff 38%, #ffffff 62%, var(--color-italia-red) 72%, var(--color-italia-red) 100%);
  /* ^ Italian flag tricolor — use for hover-italia bar effect */

  /* ─── Typography ─────────────────────────────────────── */
  --font-body:  'Figtree', sans-serif;
  --font-size-base: 18px;   /* Set on html {} — 1rem = 18px */

  /* Fluid heading sizes — scale automatically, no breakpoints needed */
  --font-size-h1:    clamp(36px, 4vw, 52px);
  --font-size-hero:  clamp(35px, 3.4vw, 56px);  /* Hero headlines — larger than h1 */
  --font-size-h2:    clamp(22px, 3vw, 32px);
  --font-size-h3:    clamp(18px, 2.5vw, 24px);
  --font-size-label: 18px;

  /* Body text variants (relative to 18px base) */
  --font-size-caption: 1rem;  /* 18px — smallest allowed size */
  --font-size-sm:  1rem;      /* 18px — eyebrow/caption */
  --font-size-md:  1rem;      /* 18px — standard body */
  --font-size-body-lg: 1.1rem; /* ~19.8px — lead/intro paragraphs */
  --font-size-lg:  1.4rem;    /* ~25.2px — card titles */
  --font-size-xl:  1.78rem;   /* ~32px */
  --font-size-cta-price: clamp(36px, 5vw, 52px); /* CTA $10/week hero price */
  --font-size-quote-mark: 5rem;  /* Decorative open/close quote marks */
  --font-size-icon: 2rem;        /* Icon containers in "who is this for" sections */

  /* Weights */
  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* Line heights */
  --line-height-tight:  1.1;
  --line-height-snug:   1.2;
  --line-height-hero:   1.25;  /* Hero headlines — matches homepage standard */
  --line-height-normal: 1.5;
  --line-height-loose:  1.8;

  /* ─── Spacing — 4px base scale ───────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;   /* Card gap in grids */
  --sp-7:   32px;   /* Card padding */
  --sp-8:   40px;
  --sp-9:   48px;
  --sp-10:  64px;   /* Section horizontal padding */
  --sp-11:  80px;   /* Section vertical padding */
  --sp-12:  120px;

  /* ─── Border Radius ───────────────────────────────────── */
  --r-xs:   6px;    /* Small buttons */
  --r-sm:   8px;    /* Buttons, inputs */
  --r-md:   12px;   /* Icon containers */
  --r-lg:   16px;   /* Cards */
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-pill: 100px;  /* Tags, pill badges */

  /* ─── Shadows (all use --color-text rgba) ────────────── */
  --shadow-xs: 0 1px 3px  rgba(28, 52, 71, 0.03);
  --shadow-sm: 0 2px 8px  rgba(28, 52, 71, 0.05);   /* Cards resting */
  --shadow-md: 0 4px 24px rgba(28, 52, 71, 0.07);   /* Cards hover */
  --shadow-lg: 0 12px 40px rgba(28, 52, 71, 0.10);  /* Elevated hover */
  --shadow-xl: 0 20px 60px rgba(28, 52, 71, 0.14);  /* Modals, dropdowns */

  /* ─── Transitions ────────────────────────────────────── */
  --transition-fast:   0.2s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);   /* Buttons */
  --transition-slow:   0.35s cubic-bezier(0.4, 0, 0.2, 1);   /* Cards */

  /* ─── Layout ─────────────────────────────────────────── */
  --max-width-content: 70ch;
  --max-width-site:    1280px;
  --header-height:     72px;
  --max-width-cta-inner: 540px;   /* CTA section inner container */
}