/* ==========================================================================
   ARADHNAA — base.css
   Design tokens, reset, typography primitives.
   Everything downstream reads from these variables. Never hardcode a hex
   in layout.css / home.css — add a token here instead.
   ========================================================================== */

:root{
  /* ---- Brand colour (from Media/color-palette.html) ---- */
  --void:        #150B07;   /* primary dark background      */
  --deep:        #241209;   /* secondary dark surface       */
  --ember:       #F0A93E;   /* flame glow, highlights       */
  --marigold:    #E2661C;   /* primary CTA, links           */
  --sindoor:     #A32C1E;   /* CTA gradient base, sparing   */
  --brass:       #C9A15A;   /* borders, dividers, marks     */
  --sandalwood:  #F1E7D3;   /* text & UI on dark            */
  --paper:       #FAF5EC;   /* light-mode background        */

  /* ---- Semantic tokens ---- */
  --bg:              var(--void);
  --bg-elevated:     #1D0F09;
  --surface:         rgba(201,161,90,.045);
  --surface-hover:   rgba(240,169,62,.075);

  /* On dark surfaces (hero, header, drawers, footer) */
  --text:            var(--sandalwood);
  --text-muted:      rgba(241,231,211,.74);  /* >=4.5:1 on --void  */
  --text-subtle:     rgba(241,231,211,.58);  /* non-essential only */

  /* On Paper surfaces (main content). Brass is far too pale to carry text
     on Paper (~2:1), so meta text uses the dark end of the brass gradient
     and accents use Sindoor rather than Marigold. */
  --ink:             var(--deep);            /* #241209, ~13:1 on Paper */
  --ink-muted:       rgba(36,18,9,.78);
  --ink-subtle:      rgba(36,18,9,.63);   /* .58 landed at 4.45:1 - just under AA */
  --brass-deep:      #8C6A2E;                /* ~4.9:1 on white         */
  --paper-surface:   #FFFFFF;
  --paper-raised:    #FFFCF6;
  --paper-line:      rgba(36,18,9,.12);
  --paper-line-strong: rgba(140,106,46,.34);

  --line:            rgba(201,161,90,.18);
  --line-strong:     rgba(201,161,90,.34);

  --whatsapp:        #1E9E58;
  --whatsapp-deep:   #0F7A40;   /* 5.42:1 with white - the card CTA  */
  --success-deep:    #1E7A46;   /* 5.949:1 on white - the "% off"    */
  --whatsapp-bright: #25D366;
  /* Ember is 1.85:1 on Paper, well under the 3:1 WCAG 2.2 asks of a focus
     indicator. Sindoor is 6.59:1 there. The dark sections restore Ember
     below, where it is the readable one. */
  --focus:           var(--sindoor);

  /* ---- Gradients & glow ---- */
  --grad-cta:    linear-gradient(180deg, var(--marigold), var(--sindoor));
  --grad-brass:  linear-gradient(180deg, #E4C583, #8C6A2E);
  --grad-surface:linear-gradient(160deg, #201007, var(--void));
  --glow-soft:   rgba(240,169,62,.18);
  --glow-cta:    0 8px 30px -8px rgba(226,102,28,.55);
  --glow-cta-hi: 0 12px 34px -6px rgba(226,102,28,.72);

  /* ---- Type ---- */
  --font-display: 'Cinzel', 'Noto Serif Devanagari', Georgia, serif;   /* headlines, prices  */
  --font-accent:  'Cormorant Garamond', 'Noto Serif Devanagari', Georgia, serif; /* taglines */
  --font-body:    'Karla', 'Noto Sans Devanagari', system-ui, sans-serif; /* body, buttons  */
  --font-deva:    'Noto Serif Devanagari', Georgia, serif;/* eyebrows, short anchors     */

  /* Latin faces come first in every stack, so Latin words (WhatsApp, NCR,
     the rupee sign) keep Cinzel/Karla and only Devanagari falls through to
     Noto. Nothing changes for English. */

  --step--1: 13px;
  --step-0:  16px;
  --step-1:  clamp(18px, 1.4vw, 21px);
  --step-2:  clamp(22px, 2.2vw, 30px);
  --step-3:  clamp(27px, 3.2vw, 42px);
  --step-4:  clamp(32px, 4.6vw, 60px);

  /* ---- Spacing (4/8 rhythm) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10:128px;

  --radius-sm: 3px;  --radius-md: 6px;  --radius-lg: 14px;  --radius-pill: 999px;

  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.4,.64,1);
  --dur-fast:   160ms;
  --dur-base:   260ms;
  --dur-slow:   420ms;

  /* ---- Elevation / layering ---- */
  --z-base:0; --z-raised:10; --z-header:20; --z-float:25; --z-overlay:29; --z-drawer:30;
  --shadow-card: 0 18px 40px -24px rgba(0,0,0,.85);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

/* Paper is the page. Dark sections (hero, header, footer, drawers) opt back
   into the dark palette explicitly. */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }

/* ---------- Focus: visible on every operable control ---------- */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}
:focus:not(:focus-visible){ outline:none; }

/* ---------- Shared primitives ---------- */
.container{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gutter);
}

.eyebrow{
  font-family:var(--font-deva);
  font-size:16px; color:var(--sindoor);   /* ~6.5:1 on Paper */
  letter-spacing:.04em; margin-bottom:var(--space-4);
}

.section-title{
  font-family:var(--font-display); font-weight:600;
  font-size:var(--step-3); line-height:1.16; color:var(--ink);
  text-wrap:balance;
}
/* Marigold clears 3:1 at display sizes; it would not at body size. */
.section-title em{ font-style:normal; color:var(--marigold); }

.section-sub{
  font-family:var(--font-accent); font-style:italic;
  font-size:var(--step-1); color:var(--ink-muted);
  max-width:52ch; margin-top:var(--space-3); text-wrap:pretty;
}

/* Dark sections restate the light-on-dark colours. */
.on-dark{ background:var(--void); color:var(--text); --focus:var(--ember); }
.on-dark .section-title{ color:var(--text); }
.on-dark .section-title em{ color:var(--ember); }
.on-dark .section-sub{ color:var(--text-muted); }
.on-dark .eyebrow{ color:var(--marigold); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:14px 30px;
  font-family:var(--font-body); font-weight:600; font-size:13.5px;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--radius-sm);
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             background-color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.btn--primary{ background:var(--grad-cta); color:var(--sandalwood); box-shadow:var(--glow-cta); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--glow-cta-hi); }
.btn--primary:active{ transform:translateY(0); }

.btn--ghost{ border:1px solid var(--paper-line-strong); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--marigold); color:var(--marigold); background:rgba(226,102,28,.06); }
.on-dark .btn--ghost{ border-color:var(--line-strong); color:var(--text); }
.on-dark .btn--ghost:hover{ border-color:var(--ember); color:var(--ember); background:var(--surface-hover); }

.btn--whatsapp{ background:var(--whatsapp); color:#fff; box-shadow:0 10px 26px -8px rgba(30,158,88,.6); }
.btn--whatsapp:hover{ transform:translateY(-2px); background:#22B063; }
.btn__icon{ width:18px; height:18px; flex:none; fill:currentColor; }

/* Screen-reader-only, but focusable when needed */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; top:-100px; left:var(--space-4); z-index:100;
  background:var(--ember); color:var(--void); padding:12px 20px;
  font-weight:700; border-radius:var(--radius-sm);
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top:var(--space-3); }

/* Film grain — shared texture used by hero and section backdrops */
.grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* ==========================================================================
   HINDI
   Devanagari has no italic and no bold in the loaded weights beyond 600,
   so synthesis is switched off: the browser would otherwise shear the
   glyphs into a fake oblique, which reads as a rendering fault rather than
   as emphasis. Latin fragments inside a Hindi sentence keep their real
   italic because those faces genuinely ship one.
   ========================================================================== */
html[lang="hi"]{
  font-synthesis: none;
  -webkit-font-synthesis: none;
}

/* Devanagari carries a headline stroke on top of the letters, so the same
   line-height that suits Cinzel crowds it. */
html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3{ line-height:1.28; }
html[lang="hi"] p{ line-height:1.65; }

/* ==========================================================================
   PHONE SECTION RHYTHM
   Each band was given its own padding as it was built, and they had drifted
   to 16/24/32px. Measured between the painted edges of the content, that
   showed up as gaps of 32px in some places and 64px in others, which reads
   as "extra space" rather than as rhythm. One value fixes the rhythm at 32px
   throughout; the full-bleed dark bands keep a little more so their
   background does not crowd the text sitting on it.
   ========================================================================== */
@media (max-width:599px){
  main > .shop,
  main > .testimonials,
  main > .home-faq,
  main > .social,
  main > .grid-section,
  main > .prose{ padding-block:var(--space-4); }

  main > .promise,
  main > .signup,
  main > .presence{ padding-block:var(--space-5); }
}