/* ============================================================================
   IMPERIAL — Design tokens (bundled from Imperial2/tokens/*)
   Imported into base.html. Warm ink/paper palette, glass materials,
   Bodoni + Hanken + Space Mono type. Do not hand-edit values here —
   they mirror the Imperial2 design system.
   ============================================================================ */

/* ---------- tokens/fonts.css ---------- */
/* Imperial — Webfonts
 * Display: Bodoni Moda  — editorial, high-contrast Didone for fashion headlines + the wordmark
 * UI/Body: Hanken Grotesk — clean neutral grotesque for all functional UI
 * Mono:    Space Mono   — SKUs, order ids, technical specs (used sparingly)
 *
 * NOTE: substituted from the source kit's "SF Pro" (Apple system font, not redistributable).
 * These Google Fonts give Imperial its own voice. Swap if brand fonts are licensed later.
 */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;0,6..96,900;1,6..96,400;1,6..96,500&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Space+Mono:wght@400;700&display=swap');

/* ---------- tokens/colors.css ---------- */
/* Imperial — Color tokens
 * High-contrast editorial monochrome: warm ink + warm paper, a full neutral ramp,
 * and a single Sicilian blood-orange accent ("Saldi") reserved for sale / promo / error.
 * Image-forward: most surfaces sit over photography, so neutrals are warm-tinted, not pure gray.
 */
:root {
  /* ---- Ink (warm near-black ramp) ---- */
  --ink-950: #0C0A09;
  --ink-900: #14110F; /* brand ink — primary text, CTAs */
  --ink-800: #2A2622;
  --ink-700: #423C36;
  --ink-600: #5E574F;
  --ink-500: #837A70; /* mid neutral */
  --ink-400: #A8A096;
  --ink-300: #CBC4BA;
  --ink-200: #E3DDD3;
  --ink-100: #EFEAE1;
  --ink-050: #F4F0E9;

  /* ---- Paper (warm off-whites) ---- */
  --paper:      #F7F4EF; /* default page background */
  --paper-warm: #F1ECE3; /* recessed / alt sections */
  --paper-pure: #FFFFFF; /* cards, sharp surfaces */

  /* ---- Saldi (Sicilian blood-orange — sale / promo / error ONLY) ---- */
  --saldi-700: #9E2614;
  --saldi-600: #C2341B;
  --saldi-500: #E2402A; /* primary accent */
  --saldi-400: #EE6450;
  --saldi-100: #FBE7E2; /* tint background */

  /* ---- Supporting semantics ---- */
  --success-600: #2E7D5B;
  --success-100: #E2F0E9;
  --warning-600: #B5840F;
  --warning-100: #F6ECD3;
  --info-600:    #2A6FDB; /* links / informational, used sparingly */
  --info-100:    #E4ECFB;

  /* ---- Semantic aliases — reference these in components ---- */
  --bg:               var(--paper);
  --bg-warm:          var(--paper-warm);
  --surface:          var(--paper-pure);
  --surface-sunken:   var(--paper-warm);

  --text-primary:     var(--ink-900);
  --text-secondary:   var(--ink-600);
  --text-tertiary:    var(--ink-500);
  --text-disabled:    var(--ink-400);
  --text-inverse:     var(--paper);
  --text-on-accent:   #FFFFFF;

  --border-hairline:  rgba(20, 17, 15, 0.08);
  --border-subtle:    rgba(20, 17, 15, 0.12);
  --border-strong:    rgba(20, 17, 15, 0.22);

  --accent:           var(--saldi-500);
  --accent-hover:     var(--saldi-600);
  --accent-press:     var(--saldi-700);
  --accent-tint:      var(--saldi-100);

  --action:           var(--ink-900); /* default CTA is ink, not accent */
  --action-hover:     var(--ink-800);
  --action-press:     var(--ink-950);

  --focus-ring:       rgba(42, 111, 219, 0.55);
}

/* ---------- tokens/typography.css ---------- */
/* Imperial — Typography
 * Two voices:
 *  - Display (Bodoni Moda): editorial, high-contrast. Hero headlines, section titles, the wordmark.
 *  - UI (Hanken Grotesk): everything functional — body, labels, buttons, nav.
 *  - Mono (Space Mono): SKUs, order numbers, technical specs.
 * UI scale follows the source kit's spatial type ramp (34/28/22/20/17/16/15/13/12/11).
 */
:root {
  --font-display: "Bodoni Moda", "Times New Roman", Georgia, serif;
  --font-ui: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Editorial display (Bodoni) ---- */
  --type-hero-size: clamp(56px, 9vw, 132px);
  --type-hero-lh: 0.94;
  --type-hero-weight: 500;
  --type-hero-tracking: -0.02em;

  --type-display-size: clamp(40px, 5vw, 72px);
  --type-display-lh: 1.0;
  --type-display-weight: 500;
  --type-display-tracking: -0.015em;

  --type-editorial-size: clamp(28px, 3vw, 40px);
  --type-editorial-lh: 1.08;
  --type-editorial-weight: 500;

  /* ---- UI ramp (Hanken Grotesk) ---- */
  --type-large-title: 34px;   --type-large-title-lh: 40px;
  --type-title-1: 28px;       --type-title-1-lh: 34px;
  --type-title-2: 22px;       --type-title-2-lh: 28px;
  --type-title-3: 20px;       --type-title-3-lh: 25px;
  --type-headline: 17px;      --type-headline-lh: 22px;   /* semibold */
  --type-body: 17px;          --type-body-lh: 24px;
  --type-callout: 16px;       --type-callout-lh: 22px;
  --type-subhead: 15px;       --type-subhead-lh: 20px;
  --type-footnote: 13px;      --type-footnote-lh: 18px;
  --type-caption-1: 12px;     --type-caption-1-lh: 16px;
  --type-caption-2: 11px;     --type-caption-2-lh: 14px;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* fashion micro-labels — letterspaced uppercase eyebrows */
  --eyebrow-tracking: 0.18em;
}

/* ---- Specimen / utility classes ---- */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--type-hero-size);
  line-height: var(--type-hero-lh);
  font-weight: var(--type-hero-weight);
  letter-spacing: var(--type-hero-tracking);
  color: var(--text-primary);
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--type-display-size);
  line-height: var(--type-display-lh);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
  color: var(--text-primary);
}
.t-editorial {
  font-family: var(--font-display);
  font-size: var(--type-editorial-size);
  line-height: var(--type-editorial-lh);
  font-weight: var(--type-editorial-weight);
  color: var(--text-primary);
}
.t-large-title { font: var(--weight-bold) var(--type-large-title)/var(--type-large-title-lh) var(--font-ui); letter-spacing: -0.02em; }
.t-title-1 { font: var(--weight-bold) var(--type-title-1)/var(--type-title-1-lh) var(--font-ui); letter-spacing: -0.015em; }
.t-title-2 { font: var(--weight-semibold) var(--type-title-2)/var(--type-title-2-lh) var(--font-ui); letter-spacing: -0.01em; }
.t-title-3 { font: var(--weight-semibold) var(--type-title-3)/var(--type-title-3-lh) var(--font-ui); }
.t-headline { font: var(--weight-semibold) var(--type-headline)/var(--type-headline-lh) var(--font-ui); }
.t-body { font: var(--weight-regular) var(--type-body)/var(--type-body-lh) var(--font-ui); }
.t-callout { font: var(--weight-regular) var(--type-callout)/var(--type-callout-lh) var(--font-ui); }
.t-subhead { font: var(--weight-medium) var(--type-subhead)/var(--type-subhead-lh) var(--font-ui); }
.t-footnote { font: var(--weight-regular) var(--type-footnote)/var(--type-footnote-lh) var(--font-ui); color: var(--text-secondary); }
.t-caption { font: var(--weight-regular) var(--type-caption-1)/var(--type-caption-1-lh) var(--font-ui); color: var(--text-tertiary); }
.t-eyebrow {
  font: var(--weight-semibold) var(--type-caption-1)/1.2 var(--font-ui);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.t-mono { font-family: var(--font-mono); font-size: var(--type-footnote); letter-spacing: -0.01em; }
.t-price { font: var(--weight-semibold) var(--type-title-3)/1 var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---------- tokens/materials.css ---------- */
/* Imperial — Materials (the spatial / glass layer)
 * Inspired by visionOS material physics: translucent panels that float over imagery,
 * sampling the content behind them via backdrop-filter blur + saturation.
 * Two families: LIGHT glass (white-based, for bright/airy chrome over photography)
 * and INK glass (smoked, for overlays, dark navigation, and high-contrast scrims).
 *
 * Usage: apply --glass-*-bg as `background`, --glass-blur-* as backdrop-filter,
 * and pair with --glass-border + a depth shadow. Always include a fallback bg
 * for browsers without backdrop-filter.
 */
:root {
  /* blur + saturation steps */
  --glass-blur-thin:    saturate(1.4) blur(20px); /* @kind other */
  --glass-blur-regular: saturate(1.7) blur(34px); /* @kind other */
  --glass-blur-thick:   saturate(1.8) blur(48px); /* @kind other */

  /* LIGHT glass — increasing opacity = increasing "thickness" */
  --glass-ultrathin-bg: rgba(255, 255, 255, 0.42);
  --glass-thin-bg:      rgba(255, 255, 255, 0.58);
  --glass-regular-bg:   rgba(247, 244, 239, 0.72);
  --glass-thick-bg:     rgba(247, 244, 239, 0.88);

  /* INK glass — smoked, for overlays & dark chrome */
  --glass-ink-thin-bg:  rgba(20, 17, 15, 0.38);
  --glass-ink-bg:       rgba(20, 17, 15, 0.55);
  --glass-ink-thick-bg: rgba(20, 17, 15, 0.74);

  /* edges — a bright top/edge highlight is what reads as "glass" */
  --glass-border:        rgba(255, 255, 255, 0.55);
  --glass-border-soft:   rgba(255, 255, 255, 0.35);
  --glass-border-ink:    rgba(255, 255, 255, 0.14);
  --glass-highlight:     inset 0 1px 0 rgba(255, 255, 255, 0.6); /* @kind shadow */
  --glass-highlight-ink: inset 0 1px 0 rgba(255, 255, 255, 0.12); /* @kind shadow */

  /* scrims — flat gradients to protect text over busy imagery */
  --scrim-bottom: linear-gradient(to top, rgba(20,17,15,0.72) 0%, rgba(20,17,15,0.32) 38%, rgba(20,17,15,0) 72%); /* @kind other */
  --scrim-top:    linear-gradient(to bottom, rgba(20,17,15,0.55) 0%, rgba(20,17,15,0) 60%); /* @kind other */
}

/* ---------- tokens/shadows.css ---------- */
/* Imperial — Elevation / depth
 * Soft, large-radius shadows that make panels read as floating in space.
 * Warm-tinted (ink) shadow color, never pure black, to match the paper ground.
 */
:root {
  --shadow-hairline: 0 0 0 1px var(--border-hairline);
  --shadow-1: 0 1px 2px rgba(20, 17, 15, 0.06);
  --shadow-2: 0 4px 14px rgba(20, 17, 15, 0.08), 0 1px 3px rgba(20, 17, 15, 0.05);
  --shadow-3: 0 12px 32px rgba(20, 17, 15, 0.10), 0 3px 8px rgba(20, 17, 15, 0.06);
  /* floating glass panels */
  --shadow-float: 0 18px 48px rgba(20, 17, 15, 0.14), 0 4px 12px rgba(20, 17, 15, 0.07);
  /* full spatial "window" — modals, drawers, hero cards */
  --shadow-window: 0 40px 90px rgba(20, 17, 15, 0.22), 0 12px 32px rgba(20, 17, 15, 0.12);
  /* pop-overs / menus */
  --shadow-pop: 0 24px 60px rgba(20, 17, 15, 0.18), 0 6px 16px rgba(20, 17, 15, 0.10);
  /* accent glow for sale emphasis (used very sparingly) */
  --shadow-accent: 0 8px 28px rgba(226, 64, 42, 0.28);
}

/* ---------- tokens/radius.css ---------- */
/* Imperial — Radius
 * Generously rounded, "continuous"-feeling corners — the spatial language reads soft.
 * Large radii on floating panels; pills on chips & primary buttons.
 */
:root {
  --radius-xs:   8px;
  --radius-sm:   12px;
  --radius-md:   18px;  /* inputs, small cards */
  --radius-lg:   26px;  /* cards, glass tiles */
  --radius-xl:   34px;  /* floating panels */
  --radius-2xl:  44px;  /* spatial windows, hero glass */
  --radius-pill: 999px;
  --radius-circle: 50%;
}

/* ---------- tokens/spacing.css ---------- */
/* Imperial — Spacing
 * 4px-based ramp with the in-between steps the layouts actually use.
 * Plus a few semantic gutters for page / section / card rhythm.
 */
:root {
  --space-0:   0;
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:   12px;
  --space-6:   16px;
  --space-7:   20px;
  --space-8:   24px;
  --space-9:   32px;
  --space-10:  40px;
  --space-11:  48px;
  --space-12:  64px;
  --space-13:  80px;
  --space-14:  96px;
  --space-15:  128px;

  /* semantic */
  --gutter-card:     24px;
  --gutter-section:  80px;
  --page-margin:     clamp(20px, 5vw, 88px);
  --page-max:        1440px;
  --content-max:     1180px;
}

/* ---------- tokens/motion.css ---------- */
/* Imperial — Motion
 * Smooth, soft, spatial. No bounces on content; gentle ease-out spring on chrome.
 * Hover = glass brightens + lifts a hair; press = scale down + dim.
 */
:root {
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-soft:   cubic-bezier(0.32, 0.72, 0, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */

  --dur-instant: 90ms; /* @kind other */
  --dur-fast:    160ms; /* @kind other */
  --dur:         240ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
  --dur-slower:  680ms; /* @kind other */

  --press-scale: 0.97; /* @kind other */
  --hover-lift:  -2px; /* @kind other */
}

/* ---------- tokens/base.css ---------- */
/* Imperial — Base reset + shared helpers
 * Minimal, opinionated reset. Sets the warm-paper ground and UI font default.
 * Provides the .glass-* material helpers components and kits reuse.
 */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: rgba(226, 64, 42, 0.18); }

/* ---- Glass material helpers ---- */
.glass {
  background: var(--glass-regular-bg);
  -webkit-backdrop-filter: var(--glass-blur-regular);
  backdrop-filter: var(--glass-blur-regular);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-float), var(--glass-highlight);
}
.glass-thin {
  background: var(--glass-thin-bg);
  -webkit-backdrop-filter: var(--glass-blur-thin);
  backdrop-filter: var(--glass-blur-thin);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--shadow-2), var(--glass-highlight);
}
.glass-thick {
  background: var(--glass-thick-bg);
  -webkit-backdrop-filter: var(--glass-blur-thick);
  backdrop-filter: var(--glass-blur-thick);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-window), var(--glass-highlight);
}
.glass-ink {
  background: var(--glass-ink-bg);
  -webkit-backdrop-filter: var(--glass-blur-regular);
  backdrop-filter: var(--glass-blur-regular);
  border: 1px solid var(--glass-border-ink);
  box-shadow: var(--shadow-float), var(--glass-highlight-ink);
  color: var(--text-inverse);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass, .glass-thin { background: var(--paper-pure); }
  .glass-thick { background: var(--paper-pure); }
  .glass-ink { background: var(--ink-900); }
}