/* ============================================================
   HIMAAL PURE — Design Tokens
   Matches the wireframe Tailwind config exactly
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;1,400;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  /* ── Colors ── */
  --color-primary:                  #032517;
  --color-primary-container:        #1b3b2b;
  --color-primary-fixed:            #c7ebd4;
  --color-primary-fixed-dim:        #abcfb8;
  --color-on-primary:               #ffffff;
  --color-on-primary-container:     #83a590;
  --color-on-primary-fixed:         #002113;
  --color-on-primary-fixed-variant: #2d4d3c;

  --color-secondary:                #775a19;
  --color-secondary-container:      #fed488;
  --color-secondary-fixed:          #ffdea5;
  --color-secondary-fixed-dim:      #e9c176;
  --color-on-secondary:             #ffffff;
  --color-on-secondary-container:   #785a1a;
  --color-on-secondary-fixed:       #261900;
  --color-on-secondary-fixed-variant: #5d4201;

  --color-surface:                  #fbf9f6;
  --color-surface-bright:           #fbf9f6;
  --color-surface-dim:              #dbdad7;
  --color-surface-variant:          #e4e2df;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low:    #f5f3f0;
  --color-surface-container:        #efeeeb;
  --color-surface-container-high:   #eae8e5;
  --color-surface-container-highest:#e4e2df;
  --color-surface-sand-subtle:      #F4EFEA;

  --color-on-surface:               #1b1c1a;
  --color-on-surface-variant:       #424843;
  --color-on-background:            #1b1c1a;

  --color-outline:                  #727973;
  --color-outline-variant:          #c1c8c2;
  --color-border-warm-hairline:     #E7E0D6;

  --color-inverse-surface:          #30312f;
  --color-inverse-on-surface:       #f2f0ed;
  --color-inverse-primary:          #abcfb8;

  --color-gold-metallic-bright:     #D4AF37;
  --color-success-botanical:        #2D5A3F;
  --color-charcoal-body:            #232724;

  --color-error:                    #ba1a1a;
  --color-on-error:                 #ffffff;
  --color-error-container:          #ffdad6;

  --color-tertiary:                 #1f201f;
  --color-tertiary-container:       #343534;
  --color-tertiary-fixed:           #e4e2e0;
  --color-tertiary-fixed-dim:       #c7c6c4;
  --color-on-tertiary:              #ffffff;
  --color-on-tertiary-container:    #9e9d9b;
  --color-on-tertiary-fixed:        #1b1c1b;
  --color-on-tertiary-fixed-variant:#464745;

  /* ── Typography ── */
  --font-display:     'Playfair Display', Georgia, serif;
  --font-body:        'Plus Jakarta Sans', system-ui, sans-serif;

  --text-display-hero:        48px;
  --lh-display-hero:          56px;
  --ls-display-hero:          -0.02em;
  --fw-display-hero:          600;

  --text-display-hero-mobile: 34px;
  --lh-display-hero-mobile:   40px;
  --ls-display-hero-mobile:   -0.01em;

  --text-headline-lg:         36px;
  --lh-headline-lg:           44px;
  --ls-headline-lg:           -0.015em;
  --fw-headline-lg:           500;

  --text-headline-lg-mobile:  26px;
  --lh-headline-lg-mobile:    32px;

  --text-headline-md:         24px;
  --lh-headline-md:           30px;
  --fw-headline-md:           500;

  --text-headline-sm:         20px;
  --lh-headline-sm:           26px;
  --fw-headline-sm:           600;

  --text-body-lg:             18px;
  --lh-body-lg:               28px;
  --fw-body-lg:               400;

  --text-body-md:             15px;
  --lh-body-md:               24px;
  --fw-body-md:               400;

  --text-body-sm:             13px;
  --lh-body-sm:               18px;
  --fw-body-sm:               400;

  --text-label-lg:            14px;
  --lh-label-lg:              20px;
  --ls-label-lg:              0.02em;
  --fw-label-lg:              600;

  --text-label-md:            12px;
  --lh-label-md:              16px;
  --ls-label-md:              0.04em;
  --fw-label-md:              600;

  --text-price-lg:            24px;
  --lh-price-lg:              28px;
  --fw-price-lg:              700;

  --text-label-badge:         10px;
  --lh-label-badge:           14px;
  --ls-label-badge:           0.08em;
  --fw-label-badge:           700;

  /* ── Spacing ── */
  --space-xxs:    0.25rem;
  --space-xs:     0.5rem;
  --space-sm:     0.75rem;
  --space-md:     1rem;
  --space-lg:     1.5rem;
  --space-xl:     2rem;
  --space-2xl:    3rem;
  --space-3xl:    4rem;
  --margin-mobile: 1rem;
  --gutter-mobile: 0.75rem;
  --margin-desktop: 3rem;
  --gutter-desktop: 1.5rem;

  /* ── Border Radius ── */
  --radius-sm:   0.125rem;
  --radius-md:   0.25rem;
  --radius-lg:   0.5rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(3,37,23,0.06), 0 1px 2px rgba(3,37,23,0.04);
  --shadow-md:  0 4px 12px rgba(3,37,23,0.08), 0 2px 4px rgba(3,37,23,0.06);
  --shadow-lg:  0 8px 24px rgba(3,37,23,0.12), 0 4px 8px rgba(3,37,23,0.08);
  --shadow-header: 0 1px 12px rgba(3,37,23,0.04);
  --shadow-nav:    0 -2px 16px rgba(27,59,43,0.06);
}