/* ============================================================
   LUSTRE — style.css
   Combined design tokens + page-level styles for the standalone export.
   ============================================================ */

/* ============================================================
   LUSTRE — Webfonts
   NOTE: Google Fonts stand-ins are used for the brand faces.
   Spectral, Hanken Grotesk and IBM Plex Mono are loaded via the
   Google Fonts CSS API. Swap these for licensed brand binaries by
   replacing this @import with local @font-face rules.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&display=swap');


/* ============================================================
   LUSTRE — Color tokens
   Warm-neutral foundation + four metal-reactive accent themes.
   Apply a theme by setting data-metal="gold|silver|platinum|palladium"
   on any scope; components read the --metal-* semantic tokens.
   ============================================================ */

:root {
  /* --- Warm neutral ramp (paper → ink) --- */
  --paper-0:   #FFFFFF;
  --paper-50:  #FAF9F6;
  --paper-100: #F2F0EA;
  --paper-200: #E6E3DA;
  --paper-300: #D2CEC2;
  --ink-400:   #ABA697;
  --ink-500:   #837E6F;
  --ink-600:   #5F5B4F;
  --ink-700:   #46433A;
  --ink-800:   #2E2C26;
  --ink-900:   #1C1B16;
  --ink-950:   #121109;

  /* --- Status (market movement) --- */
  --up:        #2E7D5B;
  --up-soft:   #E4F0EA;
  --down:      #C0492F;
  --down-soft: #F8E7E2;
  --warning:   #B6802A;

  /* --- Semantic surfaces & text --- */
  --bg:            var(--paper-50);
  --surface:       var(--paper-0);
  --surface-2:     var(--paper-100);
  --surface-sunk:  var(--paper-100);
  --border:        var(--paper-200);
  --border-strong: var(--paper-300);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary:  var(--ink-500);
  --text-disabled:  var(--ink-400);
  --text-on-accent: var(--ink-950);

  /* --- Metal palette: raw values per metal --- */
  --gold-accent:     #C39A33;
  --gold-hover:      #A9842B;
  --gold-strong:     #876619;
  --gold-surface:    #F7EFD7;
  --gold-on:         #1C1B16;
  --gold-from:       #E7CB7A;
  --gold-to:         #B0882A;

  --silver-accent:   #8E949B;
  --silver-hover:    #767C84;
  --silver-strong:   #5C6168;
  --silver-surface:  #ECEEF0;
  --silver-on:       #1C1B16;
  --silver-from:     #DCE0E4;
  --silver-to:       #969CA3;

  --platinum-accent: #45494F;
  --platinum-hover:  #34373C;
  --platinum-strong: #25272B;
  --platinum-surface:#E8E9EB;
  --platinum-on:     #FAFAF8;
  --platinum-from:   #6C7177;
  --platinum-to:     #393D43;

  --palladium-accent:#C0C4CA;
  --palladium-hover: #AAAFB6;
  --palladium-strong:#8E949B;
  --palladium-surface:#F4F5F6;
  --palladium-on:    #1C1B16;
  --palladium-from:  #EDEEF0;
  --palladium-to:    #C3C7CC;

  /* --- Active metal (default = gold, the flagship) --- */
  --metal-accent:    var(--gold-accent);
  --metal-hover:     var(--gold-hover);
  --metal-strong:    var(--gold-strong);
  --metal-surface:   var(--gold-surface);
  --metal-on-accent: var(--gold-on);
  --metal-from:      var(--gold-from);
  --metal-to:        var(--gold-to);
  --metal-ring:      color-mix(in srgb, var(--metal-accent) 40%, transparent);
}

/* ---- Metal-reactive theme scopes ---- */
[data-metal="gold"] {
  --metal-accent:    var(--gold-accent);
  --metal-hover:     var(--gold-hover);
  --metal-strong:    var(--gold-strong);
  --metal-surface:   var(--gold-surface);
  --metal-on-accent: var(--gold-on);
  --metal-from:      var(--gold-from);
  --metal-to:        var(--gold-to);
}
[data-metal="silver"] {
  --metal-accent:    var(--silver-accent);
  --metal-hover:     var(--silver-hover);
  --metal-strong:    var(--silver-strong);
  --metal-surface:   var(--silver-surface);
  --metal-on-accent: var(--silver-on);
  --metal-from:      var(--silver-from);
  --metal-to:        var(--silver-to);
}
[data-metal="platinum"] {
  --metal-accent:    var(--platinum-accent);
  --metal-hover:     var(--platinum-hover);
  --metal-strong:    var(--platinum-strong);
  --metal-surface:   var(--platinum-surface);
  --metal-on-accent: var(--platinum-on);
  --metal-from:      var(--platinum-from);
  --metal-to:        var(--platinum-to);
}
[data-metal="palladium"] {
  --metal-accent:    var(--palladium-accent);
  --metal-hover:     var(--palladium-hover);
  --metal-strong:    var(--palladium-strong);
  --metal-surface:   var(--palladium-surface);
  --metal-on-accent: var(--palladium-on);
  --metal-from:      var(--palladium-from);
  --metal-to:        var(--palladium-to);
}


/* ============================================================
   LUSTRE — Typography tokens
   Display: Spectral (serif, editorial luxe)
   UI:      Hanken Grotesk (clean grotesque)
   Mono:    IBM Plex Mono (tabular numerals for prices)
   ============================================================ */

:root {
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.8125rem;  /* 13 */
  --text-base: 0.9375rem;  /* 15 — UI default */
  --text-md:   1.0625rem;  /* 17 */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   1.5rem;     /* 24 */
  --text-2xl:  1.875rem;   /* 30 */
  --text-3xl:  2.5rem;     /* 40 */
  --text-4xl:  3.25rem;    /* 52 */
  --text-5xl:  4.5rem;     /* 72 — hero price readout */

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;  /* uppercase eyebrows / labels */
}


/* ============================================================
   LUSTRE — Spacing, radius, elevation & motion tokens
   4px base grid.
   ============================================================ */

:root {
  /* Spacing scale */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Corner radii — calm, slightly soft */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 999px;

  /* Elevation — soft, warm-tinted shadows */
  --shadow-xs: 0 1px 2px rgba(28, 27, 22, 0.06);
  --shadow-sm: 0 1px 3px rgba(28, 27, 22, 0.08), 0 1px 2px rgba(28, 27, 22, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 27, 22, 0.08), 0 2px 4px rgba(28, 27, 22, 0.04);
  --shadow-lg: 0 12px 32px rgba(28, 27, 22, 0.10), 0 4px 8px rgba(28, 27, 22, 0.05);
  --shadow-xl: 0 24px 64px rgba(28, 27, 22, 0.14), 0 8px 16px rgba(28, 27, 22, 0.06);
  /* Metal-tinted glow for the price card */
  --shadow-metal: 0 12px 40px color-mix(in srgb, var(--metal-accent) 22%, transparent);

  /* Borders */
  --border-width: 1px;
  --ring-width: 3px;

  /* Motion */
  --dur-fast: 120ms;            /* @kind other */
  --dur:      200ms;            /* @kind other */
  --dur-slow: 360ms;            /* @kind other */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);      /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
}


/* ============================================================
   LUSTRE — Base / reset layer
   Minimal, opinionated defaults that map onto the tokens.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg);
  font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--text-primary);
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; }

/* Tabular numerals everywhere a price or quantity is shown */
.tnum, .ls-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Uppercase eyebrow / micro-label */
.ls-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Focus ring — accent-aware */
.ls-focusable:focus-visible,
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ring-width) var(--metal-ring);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}


/* ---- Page-level styles ---- */
body { margin: 0; background: var(--bg); }
.ls-app { min-height: 100vh; transition: background var(--dur) var(--ease-out); }
@keyframes lsPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.ls-foot {
  border-top: 1px solid var(--border);
  padding: 28px max(24px, 5vw);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-tertiary);
}