/* ============================================================
   SKD — Sri Krishna Durga Cold Pressed Oils
   Design tokens. Palette is the grocery-reference structure
   (green header / gold accent) re-tuned to the brand logo's
   deeper navy, leaf-green and turmeric.
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --green-900:#0B3520;
  --green-800:#0F4429;
  --green-700:#14532D;   /* deep leaf — header, primary CTA */
  --green-600:#1B7A4B;   /* fresh green — accents, links */
  --green-500:#2A9D62;
  --green-300:#8FD3AE;
  --green-100:#DCF0E4;
  --green-50:#EDF7F0;

  --gold-700:#A87608;
  --gold-600:#C89310;
  --gold-500:#E8B325;    /* turmeric — top bar, tags, highlights */
  --gold-400:#F2C755;
  --gold-200:#F9E5AE;
  --gold-50:#FDF6E3;

  --navy-900:#141C2F;
  --navy-800:#1E2A47;    /* logo navy — headings */
  --navy-600:#3A4A6B;
  --navy-400:#6E7C99;

  --brown-700:#5C3617;
  --brown-600:#7A4A22;   /* ghani wood */
  --brown-300:#C9A181;
  --brown-100:#F0E2D5;

  /* ---- Neutrals ---- */
  --cream:#FBF8F1;       /* page canvas */
  --cream-alt:#F5F0E4;
  --paper:#FFFFFF;
  --ink:#181C1A;
  --ink-soft:#4A524E;
  --ink-mute:#7D857F;
  --line:#E6E0D3;
  --line-soft:#F0EADD;

  /* ---- Semantic ---- */
  --bg:var(--cream);
  --bg-elev:var(--paper);
  --fg:var(--ink);
  --fg-soft:var(--ink-soft);
  --fg-mute:var(--ink-mute);
  --accent:var(--green-700);
  --accent-2:var(--gold-500);
  --border:var(--line);

  --sale:#C63A2E;
  --star:#F5A524;
  --ok:#1B7A4B;

  /* ---- Type ---- */
  --font-display:'Fraunces','Noto Serif Telugu',Georgia,serif;
  --font-accent:'Instrument Serif','Noto Serif Telugu',Georgia,serif;
  --font-ui:'Inter','Anek Telugu',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-te-display:'Noto Serif Telugu','Fraunces',serif;
  --font-te-ui:'Anek Telugu','Inter',sans-serif;

  /* Fluid scale — 360px → 1440px */
  --step--2:clamp(0.69rem,0.67rem + 0.11vw,0.76rem);
  --step--1:clamp(0.83rem,0.79rem + 0.19vw,0.95rem);
  --step-0:clamp(1rem,0.95rem + 0.25vw,1.15rem);
  --step-1:clamp(1.2rem,1.11rem + 0.4vw,1.44rem);
  --step-2:clamp(1.44rem,1.3rem + 0.63vw,1.8rem);
  --step-3:clamp(1.73rem,1.51rem + 0.95vw,2.25rem);
  --step-4:clamp(2.07rem,1.76rem + 1.4vw,2.81rem);
  --step-5:clamp(2.49rem,2.03rem + 2.02vw,3.52rem);
  --step-6:clamp(2.99rem,2.34rem + 2.87vw,4.4rem);
  --step-7:clamp(3.58rem,2.67rem + 4.02vw,5.5rem);
  --step-8:clamp(4.3rem,3.02rem + 5.6vw,6.87rem);

  --lh-tight:1.04;
  --lh-snug:1.18;
  --lh-body:1.62;

  /* ---- Space ---- */
  --sp-1:0.25rem; --sp-2:0.5rem;  --sp-3:0.75rem; --sp-4:1rem;
  --sp-5:1.5rem;  --sp-6:2rem;    --sp-7:3rem;    --sp-8:4rem;
  --sp-9:6rem;    --sp-10:8rem;
  --section:clamp(3.5rem,2rem + 6vw,7.5rem);
  --gutter:clamp(1.15rem,0.6rem + 2.4vw,2.5rem);
  --maxw:80rem;
  --maxw-wide:92rem;
  --maxw-prose:38rem;

  /* ---- Shape ---- */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-2xl:44px;
  --r-pill:999px;

  /* ---- Elevation ---- */
  --sh-xs:0 1px 2px rgba(20,28,20,.05);
  --sh-sm:0 2px 8px rgba(20,28,20,.06),0 1px 2px rgba(20,28,20,.04);
  --sh-md:0 8px 26px rgba(20,28,20,.08),0 2px 6px rgba(20,28,20,.04);
  --sh-lg:0 20px 56px rgba(20,28,20,.11),0 4px 12px rgba(20,28,20,.05);
  --sh-xl:0 36px 90px rgba(20,28,20,.15);
  --sh-green:0 14px 34px rgba(20,83,45,.26);
  --sh-gold:0 14px 34px rgba(232,179,37,.32);

  /* ---- Motion ---- */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-in-out:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.18s; --t-med:.34s; --t-slow:.62s;

  /* ---- Layout ---- */
  --topbar-h:38px;
  --header-h:84px;
  --nav-h:52px;
  --z-cursor:9999; --z-loader:9000; --z-drawer:800; --z-header:700; --z-overlay:600;
}

/* Telugu switches the family stack wholesale */
html[lang="te"] {
  --font-display:var(--font-te-display);
  --font-accent:var(--font-te-display);
  --font-ui:var(--font-te-ui);
  --lh-tight:1.24;
  --lh-snug:1.38;
  --lh-body:1.85;
}