/* =============================================================================
   Del Plaza — tokens
   Design tokens, @font-face, base styles & typography hierarchy
   Extracted from css/style.css during the modular asset refactor.
   DESIGN_BIBLE-aligned palette, Univers typography, civic grid discipline.
   ============================================================================= */

/* =============================================================================
   Del Plaza - Luxury E-commerce Platform
   Custom CSS Stylesheet
   Bootstrap 5.3.8 — Overrides & Extensions
   ============================================================================= */

/* =============================================================================
   Bootstrap Icons 1.13.1 — Icon Library
   ============================================================================= */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

/* =============================================================================
   @font-face — Univers Self-Hosted (No Google Fonts dependency)
   All woff2 files reside in /fonts/
   ============================================================================= */
@font-face {
  font-family: 'Univers';
  src: url('../fonts/Univers-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Univers';
  src: url('../fonts/Univers-LightOblique.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Univers';
  src: url('../fonts/Univers-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Univers';
  src: url('../fonts/Univers-RegularOblique.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Univers';
  src: url('../fonts/Univers-Bold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Univers';
  src: url('../fonts/Univers-BoldOblique.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Univers';
  src: url('../fonts/Univers-Black.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Univers';
  src: url('../fonts/Univers-BlackOblique.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Univers';
  src: url('../fonts/Univers-ExtraBlack.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Univers';
  src: url('../fonts/Univers-ExtraBlackOblique.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Univers';
  src: url('../fonts/Univers-BoldCondensedOblique.woff2') format('woff2');
  font-weight: 700;
  font-stretch: condensed;
  font-style: oblique;
  font-display: swap;
}
@font-face {
  font-family: 'Univers';
  src: url('../fonts/Univers-BoldExtended.woff2') format('woff2');
  font-weight: 700;
  font-stretch: expanded;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Univers Condensed';
  src: url('../fonts/Univers-BoldCondensed.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Univers Extended';
  src: url('../fonts/Univers-Extended.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Univers UltraCondensed';
  src: url('../fonts/Univers-UltraCondensed.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Univers ExtraBlack Extended Oblique - the Storefront OPEN label face
   (css/pages/storefront.css -> .store-status--open .store-status__label).
   The stylesheet requests this family by name, so the face must be registered
   under that exact name; otherwise the label renders in Helvetica/Arial. */
@font-face {
  font-family: 'Univers ExtraBlack Extended Oblique';
  src: url('../fonts/Univers-ExtraBlackExtendedOblique.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* =============================================================================
   Variables & Design Token System
   Aligned with DESIGN_BIBLE.md semantic token scale
   ============================================================================= */
:root {
  /* ---- Palette (immutable) ---- */
  --cognac:          #A26330;
  --deep-navy:       #3c477a;
  --parchment-cream: #F9F3E5;
  --alabaster:      #F3F3F3;
  --golden-milk:     #ECD9AC;
  --slate-charcoal:  #5E5D5A;
  --muted-silver:    #C4C4C0;
  --tawny-umber:     #987458;
  --ash-grey:        #949693;
  --imperial-plum:   #2e1a47;
  --oxford-light:    #d0dbf6;
  --green:           #8dff7f;

  /* ---- Typography ---- */
  --font-primary: 'Univers', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Spacing — DESIGN_BIBLE §5 Semantic Scale (base unit: 4px = 0.25rem) ---- */
  --spacing-tiny:    0.125rem;  /* 2px  */
  --spacing-quark:   0.25rem;   /* 4px  */
  --spacing-nano:    0.5rem;    /* 8px  */
  --spacing-xxxs:    0.75rem;   /* 12px */
  --spacing-xxs:     1rem;      /* 16px */
  --spacing-xs:      1.25rem;   /* 20px */
  --spacing-sm:      1.5rem;    /* 24px */
  --spacing-md:      2rem;      /* 32px */
  --spacing-lg:      2.5rem;    /* 40px */
  --spacing-xl:      3rem;      /* 48px */
  --spacing-xxl:     4rem;      /* 64px */
  --spacing-xxxl:    5rem;      /* 80px */
  --spacing-big:     6rem;      /* 96px */
  --spacing-huge:    8rem;      /* 128px */
  --spacing-enormous: 9.625rem; /* 154px */

  /* ---- Border Radii ---- */
  --border-radius-sm: 3px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  /* Sticker geometry -- sharp top corners, rounded bottom (DESIGN_BIBLE Sec 8) */
  --border-radius-sticker: 0 0 6px 6px;

  /* ---- Shadows ---- */
  --shadow-light:  0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-heavy:  0 8px 24px rgba(0, 0, 0, 0.2);

  /* ---- Semantic Color Tokens (DESIGN_BIBLE §7) ---- */
  --color-surface-primary:         #FFFFFF;
  --color-surface-secondary:       var(--parchment-cream);
  --color-surface-dark:            var(--deep-navy);
  --color-surface-card:            #FFFFFF;
  --color-surface-header-tint:     #F7FAFC;
  --color-content-primary:         var(--slate-charcoal);
  --color-content-heading:         var(--deep-navy);
  --color-content-on-dark:         var(--parchment-cream);
  --color-content-muted:           var(--ash-grey);
  --color-content-accent:          var(--cognac);
  --color-content-inverse:         #FFFFFF;
  --color-interactive-primary:     var(--deep-navy);
  --color-interactive-hover:       var(--cognac);
  --color-interactive-active:      var(--imperial-plum);
  --color-border-primary:          var(--muted-silver);
  --color-border-accent:           var(--cognac);
  --color-border-on-dark:          rgba(247, 238, 218, 0.16);
  --color-badge-provenance:        var(--cognac);
  --color-badge-exclusive:         var(--imperial-plum);

  /* ---- Animation ---- */
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Override Bootstrap CSS vars for global congruence ---- */
  --bs-body-font-family:         var(--font-primary);
  --bs-body-color:               var(--color-content-primary);
  --bs-body-bg:                  var(--color-surface-secondary);
  --bs-border-color:             var(--color-border-primary);
  --bs-link-color:               var(--color-content-muted);
  --bs-link-hover-color:         var(--cognac);
  --bs-link-decoration:          none;
  --bs-focus-ring-color:         rgba(162, 99, 48, 0.25);
  --bs-focus-ring-width:         0.125rem;
  --bs-primary:                  var(--deep-navy);
  --bs-primary-rgb:              60, 71, 122;
  --bs-dark:                     var(--deep-navy);
}

/* =============================================================================
   Base Styles — Extend Bootstrap's reboot
   ============================================================================= */
html {
  height: 100%;
  overflow-x: hidden;
  width: 100%;
}

body {
  min-height: 100vh;
  position: relative;
  background-color: var(--color-surface-secondary); /* Parchment Cream canvas */
}

/* =============================================================================
   Typography Hierarchy — DESIGN_BIBLE §6
   Override Bootstrap's heading defaults with Univers-specific sizing
   ============================================================================= */
h1, .h1 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 600; line-height: 1.05; }
h2, .h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 600; line-height: 1.10; }
h3, .h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 500; line-height: 1.15; }
h4, .h4 { font-size: clamp(1.25rem, 2vw, 1.625rem); font-weight: 500; line-height: 1.20; }
h5, .h5 { font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 500; line-height: 1.25; }
h6, .h6 { font-size: 1rem; font-weight: 500; line-height: 1.30; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--color-content-heading);
  margin-bottom: var(--spacing-xxs);
}