/*
 * tokens.css — Design Tokens for Vaishva Yog Website
 *
 * All CSS custom properties are defined here on :root.
 * Import this file first before any other stylesheet.
 *
 * SEMANTIC ROLE MAPPING (confirmed with client):
 *   Forest Green  (#2D5A27)  → headers, primary buttons, hero branding, nav wordmark
 *   Warm Gold     (#C9961A)  → active nav highlights, accent callouts, card top borders, "Yog" wordmark
 *   Cream         (#FAF7F0)  → alternating section backgrounds (odd sections) for breathing room
 *   White         (#FFFFFF)  → alternating section backgrounds (even sections) for breathing room
 */

:root {

  /* ─── Color Palette ──────────────────────────────────────────────────────────
   *
   * Forest Green — used for: headers, primary buttons, hero branding, nav wordmark
   */
  --color-green:       #2D5A27;
  --color-green-light: #3D7A35;
  --color-green-dark:  #1E3D1A;

  /*
   * Warm Gold — used for: active nav highlights, accent callouts, card top borders, "Yog" wordmark
   */
  --color-gold:        #C9961A;
  --color-gold-light:  #E5B040;
  --color-gold-dark:   #A07812;

  /*
   * Cream — used for: odd section backgrounds, form section background, hero background
   */
  --color-cream:       #FAF7F0;
  --color-cream-dark:  #F0EBE0;

  /*
   * Text — used for: body copy and muted/secondary text
   */
  --color-text:        #1A1A1A;
  --color-text-muted:  #555547;

  /*
   * White — used for: even section backgrounds, card backgrounds
   */
  --color-white:       #FFFFFF;

  /* ─── Typography ─────────────────────────────────────────────────────────────
   *
   * Heading: Playfair Display (serif) — for h1–h3, section titles, wordmark
   * Body:    Lato / Inter (sans-serif) — for body copy, labels, UI elements
   */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Lato', 'Inter', system-ui, sans-serif;

  /* ─── Type Scale (fluid clamp) ───────────────────────────────────────────────
   *
   * All sizes use clamp() for fluid scaling between mobile and desktop viewports.
   */
  --text-xs:   clamp(0.75rem,  1.5vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 1.8vw, 1rem);
  --text-base: clamp(1rem,     2vw,   1.125rem);
  --text-lg:   clamp(1.125rem, 2.5vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 3vw,   1.75rem);
  --text-2xl:  clamp(1.75rem,  4vw,   2.5rem);
  --text-3xl:  clamp(2.25rem,  5vw,   3.5rem);
  --text-hero: clamp(3rem,     8vw,   6rem);

  /* ─── Spacing Scale ──────────────────────────────────────────────────────────
   *
   * Based on a 4px baseline grid (1 unit = 0.25rem).
   * Used for padding, margin, gap, and layout spacing throughout.
   */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ─── Layout ─────────────────────────────────────────────────────────────────
   *
   * --container-max: maximum content width, centered with auto margins
   * --nav-height:    fixed height of the sticky navigation bar
   * --section-pad-y: vertical padding applied to all full-width sections
   */
  --container-max: 1200px;
  --nav-height:    72px;
  --section-pad-y: var(--space-24);

  /* ─── Border Radii ───────────────────────────────────────────────────────────
   *
   * Used for cards, buttons, form inputs, and pill shapes.
   */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ─── Shadows ────────────────────────────────────────────────────────────────
   *
   * --shadow-card:  default resting shadow for class cards
   * --shadow-hover: elevated shadow on card hover/focus
   * --shadow-gold:  gold focus ring / accent outline (e.g. instructor image)
   */
  --shadow-card:  0 4px 24px rgba(45, 90, 39, 0.10);
  --shadow-hover: 0 8px 40px rgba(45, 90, 39, 0.18);
  --shadow-gold:  0 0 0 3px var(--color-gold-light);

  /* ─── Transitions ────────────────────────────────────────────────────────────
   *
   * --transition-fast: micro-interactions (hover state changes, toggles)
   * --transition-base: standard UI transitions (card hover lift, nav highlights)
   * --transition-slow: large-scale animations (scroll indicator fade-out)
   */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

}