/* ==========================================================================
   Aradhnaa - design tokens
   --------------------------------------------------------------------------
   The single source of truth for colour and type, loaded before style.css on
   the shop and before admin.css in the admin.

   Both stylesheets used to declare their own palette and their own font
   sizes. They drifted: the admin sat on a grey-beige ground while the shop
   used Warm Ivory, and it carried sixty-three hard-coded pixel sizes across
   twelve values against the shop's ten tokens. Anything defined here must not
   be redefined in either file.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------- brand */
  /* Every surface that carries the brand reads from --brand. The site began
     as a copy of another storefront, and its greens and olives survived in
     the announcement bar, marquee, sale badge, impact strip, footer and the
     review button - all of them now derive from the token below. */
  --brand:            #4A1725;   /* Deep Maroon      - primary */
  --brand-rgb:        74, 23, 37;
  /* Temple Burgundy: the hover and secondary tone. A step up from the primary
     rather than a different colour appearing. */
  --brand-soft:       #701F32;

  --cream:            #F8F3E8;   /* Warm Ivory       - the main ground */
  --cream-deep:       #F1E9D9;   /* halfway between ivory and sandalwood */
  --sand:             #E9DCC5;   /* Sandalwood       - the secondary ground */
  --white:            #ffffff;

  /* Antique Gold is an accent, never a ground: small uppercase labels,
     badges, stars, rules and the odd highlight. --gold-soft is the same
     colour lightened for the maroon bands. */
  --gold:             #C49A45;
  --gold-soft:        #E0C48A;
  /* Antique Gold is only 3.65:1 on white - too pale for 13px text. This
     darker cut is what small gold type uses, and it clears AA on all three
     grounds: 6.35 white, 5.74 ivory, 4.69 sandalwood. */
  --gold-deep:        #7A5A1E;

  /* Muted Saffron. The smallest role, and it has to be: 3.61 on white and
     4.29 under charcoal, so it cannot legally carry text in either
     direction. Rules, dots, bars and borders only. */
  --saffron:          #B87932;

  /* ------------------------------------------------------------- semantic */
  --text:             #292321;   /* Deep Charcoal - body copy */
  /* Warm Taupe. The brand sheet prints #75675C, which measures 4.93 on ivory
     and 4.03 on sandalwood - under the 4.5 that 13px text needs. This is the
     same hue two steps darker: 6.34 white, 5.73 ivory, 4.68 sandalwood. */
  --text-muted:       #6B5D52;
  --text-invert:      #F8F3E8;   /* ivory reads warm on maroon; a grey did not */

  --border:           rgba(74, 23, 37, 0.14);
  --border-strong:    rgba(74, 23, 37, 0.28);
  --ring:             var(--brand-soft);

  --success:          #3f6b45;
  --success-bg:       #eef5ee;
  --warn:             #8a5a12;
  --warn-bg:          #fdf2df;
  --danger:           #9b2f26;
  --danger-bg:        #fbeeec;
  --whatsapp:         #1f7a45;

  /* ----------------------------------------------------------------- type */
  /* Cormorant Garamond carries the brand voice: wordmark, hero, page and
     section titles. It is a display serif with a small x-height, so it is
     never set below 18px. Manrope carries everything else - navigation, body
     copy, buttons, product names, prices, and the whole admin. DM Serif
     Display is the editorial accent and is only requested by pages that pass
     'editorial' => true to render(). */
  --font-head:      'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:      'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-editorial: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;

  /* Manrope is drawn to be read at 400 and is not loaded below it. */
  --w-head:   600;
  --w-light:  400;
  --w-body:   400;
  --w-medium: 500;

  /* One ladder for both stylesheets.
     The lower rungs are one or two pixels apart because a dense admin table
     needs that granularity; from --fs-md up it follows a 1.25 ratio, which is
     where headings live and where clear steps matter. */
  --fs-3xs:  0.6875rem;  /* 11px - badges, pills, table headers */
  --fs-2xs:  0.75rem;    /* 12px - KPI labels, axis captions */
  --fs-xs:   0.8125rem;  /* 13px - meta, captions, admin chrome */
  --fs-sm:   0.9375rem;  /* 15px - secondary copy, prices, admin body */
  --fs-base: 1rem;       /* 16px - body, product names */
  --fs-md:   1.25rem;    /* 20px - component and panel titles */
  --fs-lg:   1.5625rem;  /* 25px - card headings, KPI figures */
  --fs-xl:   1.9375rem;  /* 31px - sub-headings */
  --fs-2xl:  2.4375rem;  /* 39px - section titles */
  --fs-3xl:  3.0625rem;  /* 49px - page and hero titles */

  /* Leading follows size: long copy wants air, a 39px heading does not, and a
     large figure wants almost none. */
  --lh-body: 1.7;
  --lh-ui:   1.4;
  --lh-head: 1.25;
  --lh-num:  1.1;

  /* Both faces are drawn with their spacing already right. Tracking is for
     uppercase labels, which genuinely need it. */
  --track:      normal;
  --track-wide: 1px;
}