/* ==========================================================================
   POORNA STORE — DESIGN TOKENS
   The single source of truth. Components consume these variables only;
   never hardcode a colour, size or duration outside this file.

   Design DNA:  Apple restraint · Stripe precision · luxury wellness warmth
                · medical authority · spiritual trust.
   Deliberately NOT: bright "Ayurvedic" green, gradient overload, pill buttons,
                template cards.
   ========================================================================== */

/* ---- Self-hosted variable fonts (declared once, here) -------------------- */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-italic.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- COLOUR — premium modern BLUE (SaaS / luxury ecommerce) ---------- */
  /* Neutrals: deep navy ink on white / pale-blue surfaces */
  --c-ink:          #0A2540;   /* primary text — deep navy                 */
  --c-ink-soft:     #294763;   /* secondary text                          */
  --c-muted:        #56708A;   /* tertiary / captions                     */
  --c-faint:        #8AA0B6;   /* disabled / meta                         */
  --c-line:         rgba(10,37,64,0.10);  /* hairline borders             */
  --c-line-strong:  rgba(10,37,64,0.16);
  --c-paper:        #FFFFFF;   /* page background — clean white            */
  --c-paper-2:      #EAF4FF;   /* recessed / alternating sections (pale)   */
  --c-surface:      #FFFFFF;   /* cards / raised surfaces                 */
  --c-surface-ink:  #0A2540;   /* inverted (dark) surfaces                */
  --c-sacred:       #0A2540;   /* full-bleed deep-navy sections           */
  --c-sacred-soft:  #0F2E4D;   /* raised panels on navy ground            */
  --c-on-sacred:    #EAF4FF;   /* light text on navy                      */
  --c-on-sacred-mut:#9CB7D6;   /* muted text on navy                      */

  /* Brand: confident blue */
  --c-brand:        #0F4C81;   /* primary brand blue                       */
  --c-brand-700:    #0A2540;   /* darker pressed/hover (navy)             */
  --c-brand-300:    #1D6FD8;   /* bright accent blue                      */
  --c-brand-tint:   #EAF4FF;   /* faint blue wash for blocks             */

  /* Accent — bright electric blue, used for emphasis (legacy "gold" slots) */
  --c-gold:         #1D6FD8;   /* accent (lines, icons, on dark)          */
  --c-gold-soft:    #7FB2F0;   /* accent text on navy/dark surfaces        */
  --c-gold-ink:     #0F4C81;   /* accent for SMALL TEXT on light — WCAG AA */
  --c-gold-on:      #FFFFFF;   /* text/ink on solid accent fills           */

  /* Cool "plinth" gradient stops (product/hero pedestal) */
  --c-plinth-1:     #FFFFFF;
  --c-plinth-2:     #EAF4FF;
  --c-plinth-3:     #D6E9FF;

  /* Functional */
  --c-success:      #1F9D6B;
  --c-danger:       #D14343;
  --c-focus:        #1D6FD8;   /* focus ring — brand blue                 */

  /* Semantic aliases (components reference these) */
  --bg:             var(--c-paper);
  --bg-alt:         var(--c-paper-2);
  --surface:        var(--c-surface);
  --text:           var(--c-ink);
  --text-soft:      var(--c-ink-soft);
  --text-muted:     var(--c-muted);
  --border:         var(--c-line);

  /* ---- TYPOGRAPHY ----------------------------------------------------- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale (mobile-first, clamps up to desktop).
     Minor-third-ish at base, more dramatic at display sizes. */
  --fs-overline: 0.75rem;                              /* eyebrow / labels  */
  --fs-meta:     0.8125rem;                            /* meta / captions   */
  --fs-sm:       0.875rem;
  --fs-base:     1rem;                                 /* body              */
  --fs-lg:       clamp(1.0625rem, 1.0rem + 0.3vw, 1.1875rem);
  --fs-xl:       clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-h3:       clamp(1.5rem,  1.3rem + 1.0vw, 2rem);
  --fs-h2:       clamp(2rem,    1.6rem + 2.0vw, 3rem);
  --fs-h1:       clamp(2.6rem,  1.9rem + 3.4vw, 4.5rem);
  --fs-display:  clamp(3rem,    2.0rem + 5.0vw, 6rem);  /* hero hero        */

  --lh-tight:   1.04;     /* display headings */
  --lh-snug:    1.15;     /* headings         */
  --lh-base:    1.6;      /* body             */
  --lh-relaxed: 1.75;     /* long-form prose  */

  --tracking-display: -0.02em;  /* tighten large serif */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;   /* overlines        */
  --tracking-caps:    0.14em;   /* small caps labels */

  --weight-light:    340;
  --weight-regular:  400;
  --weight-medium:   520;
  --weight-semibold: 600;
  --weight-bold:     680;

  /* ---- SPACING — 4px base, harmonic scale ----------------------------- */
  --space-2xs: 0.25rem;   /*  4 */
  --space-xs:  0.5rem;    /*  8 */
  --space-sm:  0.75rem;   /* 12 */
  --space-md:  1rem;      /* 16 */
  --space-lg:  1.5rem;    /* 24 */
  --space-xl:  2rem;      /* 32 */
  --space-2xl: 3rem;      /* 48 */
  --space-3xl: 4rem;      /* 64 */
  --space-4xl: 6rem;      /* 96 */
  --space-5xl: 8rem;      /* 128 */

  /* Section rhythm — fluid vertical padding for sections */
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 8rem);

  /* ---- LAYOUT --------------------------------------------------------- */
  --container:      1200px;   /* standard content width   */
  --container-wide: 1360px;   /* full-bleed-ish sections  */
  --container-text: 720px;    /* reading measure          */
  --gutter:         clamp(1.25rem, 1rem + 3vw, 2.5rem);  /* page side pad */

  /* ---- RADII — crisp, Apple/Stripe (small), never pill on buttons ------ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;   /* large cards / media only */
  --radius-pill: 999px; /* used ONLY for tags/badges, never CTAs */

  /* ---- ELEVATION — soft, low, layered (no harsh drop shadows) ---------- */
  --shadow-xs: 0 1px 2px rgba(10,37,64,0.04);
  --shadow-sm: 0 1px 3px rgba(10,37,64,0.05), 0 1px 2px rgba(10,37,64,0.04);
  --shadow-md: 0 8px 24px -8px rgba(10,37,64,0.12), 0 2px 6px rgba(10,37,64,0.05);
  --shadow-lg: 0 24px 60px -24px rgba(10,37,64,0.22), 0 6px 14px rgba(10,37,64,0.06);
  --ring:      0 0 0 3px rgba(29,111,216,0.35);  /* focus ring — blue */

  /* ---- MOTION — calm, precise (Stripe/Apple easing) ------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    480ms;
  --dur-reveal:  720ms;

  /* ---- Z-INDEX -------------------------------------------------------- */
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;

  /* ---- COMPONENT TOKENS ---------------------------------------------- */
  --header-h: 72px;
  --btn-h:    52px;
  --btn-h-sm: 42px;
}

/* Honour OS reduced-motion preference globally */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms;
  }
}