/* ============================================================================
   PON VAYAL — DESIGN TOKENS
   The brand foundation: colour, type, space, motion. "Golden field" warmth +
   palm-green craft. Earthy, editorial, tactile — built to feel hand-made, premium.
   ============================================================================ */

:root {
  /* ---- Brand colour: PON (golden field / harvest gold) ------------------- */
  --gold-900: #6E4A0E;
  --gold-800: #885B12;
  --gold-700: #A6711A;
  --gold-600: #C68A22;
  --gold-500: #DCA12F;   /* primary gold */
  --gold-400: #E8B854;
  --gold-300: #F0CC7E;
  --gold-200: #F6E1AC;
  --gold-100: #FBF0D3;

  /* ---- Brand colour: VAYAL (palm / paddy green) -------------------------- */
  --green-900: #122319;
  --green-800: #1A3324;
  --green-700: #234A33;
  --green-600: #2E6043;
  --green-500: #3C7C56;   /* primary green */
  --green-400: #5A9A72;
  --green-300: #8FBE9E;
  --green-200: #C0DCC8;
  --green-100: #E5F0E8;

  /* ---- Earth / coconut husk --------------------------------------------- */
  --husk-900: #2A1B0F;
  --husk-800: #3C2817;   /* dark coconut brown (from research: husk ~0x5a3a22) */
  --husk-700: #5A3A22;
  --husk-600: #7A552F;
  --husk-500: #99713F;
  --husk-300: #C2A079;
  --husk-200: #DFC9AC;

  /* ---- Accents ----------------------------------------------------------- */
  --clay:     #C26B3E;   /* terracotta warmth */
  --clay-soft:#E0A079;
  --water:    #BFE3DD;   /* coconut-water teal hint */
  --water-deep:#7FBFB5;
  --meat:     #F4EEE2;   /* coconut flesh off-white (never pure #fff) */
  --oil:      #E3B23C;   /* oil amber */

  /* ---- Paper / surfaces -------------------------------------------------- */
  --cream:      #FBF6EC;   /* page background */
  --cream-2:    #F6EEDD;
  --cream-3:    #F0E5CF;
  --paper:      #FFFDF8;   /* card surface */
  --ink:        #211810;   /* warm near-black text */
  --ink-soft:   #4B3F31;
  --muted:      #82725C;
  --line:       rgba(33, 24, 16, 0.12);
  --line-soft:  rgba(33, 24, 16, 0.07);

  /* ---- Semantic ---------------------------------------------------------- */
  --bg:        var(--cream);
  --surface:   var(--paper);
  --text:      var(--ink);
  --text-soft: var(--ink-soft);
  --brand:     var(--green-700);
  --accent:    var(--gold-500);
  --success:   #3C7C56;
  --danger:    #B23B2E;

  /* ---- Typography -------------------------------------------------------- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-tamil:   "Noto Serif Tamil", var(--font-display);

  --fs-display: clamp(2.9rem, 6.2vw + 0.6rem, 6.4rem);
  --fs-h1:      clamp(2.2rem, 3.8vw + 0.8rem, 4.1rem);
  --fs-h2:      clamp(1.8rem, 2.4vw + 0.8rem, 2.95rem);
  --fs-h3:      clamp(1.35rem, 1.2vw + 0.85rem, 1.85rem);
  --fs-h4:      clamp(1.15rem, 0.5vw + 0.95rem, 1.35rem);
  --fs-lg:      clamp(1.1rem, 0.4vw + 1rem, 1.28rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-sm:      0.9rem;
  --fs-xs:      0.78rem;
  --fs-eyebrow: 0.8rem;

  --lh-tight:  1.06;
  --lh-snug:   1.22;
  --lh-body:   1.68;
  --tracking-eyebrow: 0.22em;
  --tracking-tight:  -0.02em;

  /* ---- Spacing scale ----------------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.75rem;
  --sp-8:  3.5rem;
  --sp-9:  5rem;
  --sp-10: 7rem;
  --section:  clamp(5.5rem, 11vw, 11rem);
  --gutter:   clamp(1.25rem, 4vw, 3rem);
  --maxw:     1240px;
  --maxw-text: 720px;

  /* ---- Radii ------------------------------------------------------------- */
  --r-sm:  8px;
  --r:     14px;
  --r-md:  20px;
  --r-lg:  28px;
  --r-xl:  40px;
  --r-2xl: 2.4rem;
  --r-pill: 999px;

  /* ---- Shadows (warm-tinted) -------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(58,40,23,.06);
  --shadow-sm: 0 1px 2px rgba(58,40,23,.06), 0 3px 8px -2px rgba(58,40,23,.08);
  --shadow:    0 10px 34px -12px rgba(58,40,23,.18), 0 4px 10px -6px rgba(58,40,23,.10);
  --shadow-lg: 0 40px 90px -34px rgba(20,39,27,.34), 0 14px 34px -18px rgba(20,39,27,.16);
  --shadow-gold: 0 14px 40px -16px rgba(166,113,26,.45);

  /* ---- Motion ------------------------------------------------------------ */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);     /* gentle out-expo */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.18s;
  --dur-2: 0.32s;
  --dur-3: 0.6s;
  --dur-4: 0.9s;

  /* ---- Layout ------------------------------------------------------------ */
  --header-h: 76px;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  color-scheme: light;
}

/* Reduced-motion users: collapse all transition/animation durations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0.001s; --dur-2: 0.001s; --dur-3: 0.001s; --dur-4: 0.001s;
  }
}