/* ==========================================================================
   Slab & Sleeve — base properties
   https://slabandsleeve.chrisciampoli.com/style-guide
   --------------------------------------------------------------------------
   Drop-in CSS custom properties for the Slab & Sleeve design system, so the
   same palette, type scale, radii, and spacing can be injected into a theme
   somebody else wrote (an OpenCart, WordPress, or Shopify theme, say) without
   touching the source app.

   Source of truth: app/globals.css `@theme` in the Slab & Sleeve repository,
   itself ported 1:1 from design/slab_sleeve_boutique/DESIGN.md. A unit test
   fails the build if this file drifts from it.

   Fonts: the app self-hosts Fraunces and Inter (no CDN). A consuming theme
   must self-host them too; the stacks below fall back to system serif/sans.
   ========================================================================== */

:root {
  /* $FONTS ---------------------------------------------------------------- */
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* $SURFACES — tonal elevation, never shadows ----------------------------- */
  --color-background: #11131a;
  --color-on-background: #e2e2ec;
  --color-surface: #11131a;
  --color-surface-dim: #11131a;
  --color-surface-bright: #373941;
  --color-surface-container-lowest: #0c0e15;
  --color-surface-container-low: #191b22;
  --color-surface-container: #1d1f27;
  --color-surface-container-high: #282a31;
  --color-surface-container-highest: #33343c;
  --color-surface-variant: #33343c;
  --color-on-surface: #e2e2ec;
  --color-on-surface-variant: #d1c5af;
  --color-inverse-surface: #e2e2ec;
  --color-inverse-on-surface: #2e3038;
  --color-surface-tint: #ecc246;

  /* $OUTLINES ------------------------------------------------------------- */
  --color-outline: #99907b;
  --color-outline-variant: #4d4635;
  --color-hairline: #2a2e3a;
  --color-row-alt: #14161c;

  /* $BRASS — primary actions, active nav, focus ring, price only ----------- */
  --color-primary: #ecc246;
  --color-on-primary: #3d2e00;
  --color-primary-container: #c9a227;
  --color-on-primary-container: #4b3a00;
  --color-primary-fixed: #ffe08e;
  --color-primary-fixed-dim: #ecc246;
  --color-on-primary-fixed: #241a00;
  --color-on-primary-fixed-variant: #584400;
  --color-inverse-primary: #755b00;

  /* $SECONDARY — silver ---------------------------------------------------- */
  --color-secondary: #c3c6d5;
  --color-on-secondary: #2c303c;
  --color-secondary-container: #454956;
  --color-on-secondary-container: #b5b8c7;
  --color-secondary-fixed: #dfe2f2;
  --color-secondary-fixed-dim: #c3c6d5;
  --color-on-secondary-fixed: #171b27;
  --color-on-secondary-fixed-variant: #434653;

  /* $TERTIARY — periwinkle ------------------------------------------------- */
  --color-tertiary: #b5c4ff;
  --color-on-tertiary: #01297a;
  --color-tertiary-container: #89a3f9;
  --color-on-tertiary-container: #163686;
  --color-tertiary-fixed: #dbe1ff;
  --color-tertiary-fixed-dim: #b5c4ff;
  --color-on-tertiary-fixed: #00174d;
  --color-on-tertiary-fixed-variant: #244191;

  /* $ERROR — Material role, kept for form validation ----------------------- */
  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;

  /* $STATUS — stock, price deltas, errors (errors are always danger) ------- */
  --color-success: #a3e635;
  --color-warning: #eab308;
  --color-danger: #ef4444;

  /* $RARITY — pips always carry a text label too --------------------------- */
  --color-rarity-common: #9ca3af;
  --color-rarity-uncommon: #c3c6d5;
  --color-rarity-rare: #eab308;
  --color-rarity-mythic: #f59e0b;

  /* $CONDITION — NM to DMG, green to red ---------------------------------- */
  --color-condition-nm: #a3e635;
  --color-condition-lp: #eab308;
  --color-condition-mp: #f59e0b;
  --color-condition-hp: #f97316;
  --color-condition-dmg: #f87171;

  /* $TYPE SCALE ------------------------------------------------------------ */
  --text-display-lg: 2rem;
  --text-display-lg--line-height: 1.1;
  --text-display-lg--letter-spacing: -0.02em;
  --text-display-lg--font-weight: 600;

  --text-headline-md: 1.5rem;
  --text-headline-md--line-height: 1.2;
  --text-headline-md--font-weight: 600;

  --text-headline-sm: 1.125rem;
  --text-headline-sm--line-height: 1.2;
  --text-headline-sm--font-weight: 600;

  --text-body-lg: 1rem;
  --text-body-lg--line-height: 1.5;

  --text-body: 0.875rem;
  --text-body--line-height: 1.4;

  --text-body-sm: 0.75rem;
  --text-body-sm--line-height: 1.4;

  --text-label-caps: 0.625rem;
  --text-label-caps--line-height: 1;
  --text-label-caps--letter-spacing: 0.05em;
  --text-label-caps--font-weight: 600;

  --text-price: 1rem;
  --text-price--line-height: 1;
  --text-price--font-weight: 600;

  /* $RADIUS — "soft-technical"; 6px (md) is the global control radius ------ */
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
  /* Card thumbnails: 4% relative radius at a locked 5:7 aspect. */
  --radius-card: 4% / 2.8571%;

  /* $SPACING — strict 4px grid --------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --container-max: 1280px;
  --gutter: 24px;
  --gutter-tablet: 16px;
  --margin-mobile: 16px;

  /* $CONTROLS -------------------------------------------------------------- */
  --control-height: 32px;
  --control-height-prominent: 40px;
  --chip-height: 20px;
}

/* ==========================================================================
   $BASE — the minimum a host theme needs to look like Slab & Sleeve.
   Everything below reads only from the properties above.
   ========================================================================== */

.ss-theme {
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  -webkit-font-smoothing: antialiased;
}

.ss-theme h1,
.ss-theme h2,
.ss-theme h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
}

.ss-theme h1 {
  font-size: var(--text-display-lg);
  line-height: var(--text-display-lg--line-height);
  letter-spacing: var(--text-display-lg--letter-spacing);
}

.ss-theme h2 {
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md--line-height);
}

.ss-theme h3 {
  font-size: var(--text-headline-sm);
  line-height: var(--text-headline-sm--line-height);
}

.ss-theme a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-outline-variant);
  text-underline-offset: 2px;
}

.ss-theme a:hover {
  text-decoration-color: var(--color-primary);
}

/* Brass focus ring on every interactive element; never removed. */
.ss-theme :focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* $BUTTONS ----------------------------------------------------------------- */
.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: 600 var(--text-label-caps) / 1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 150ms;
}

.ss-btn:hover {
  background: var(--color-primary-fixed);
}

.ss-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-primary);
}

.ss-btn--prominent {
  height: var(--control-height-prominent);
  padding: 0 var(--space-6);
  font-size: var(--text-body);
  letter-spacing: 0;
  text-transform: none;
}

.ss-btn--secondary {
  background: transparent;
  border-color: var(--color-outline);
  color: var(--color-primary);
}

.ss-btn--secondary:hover {
  background: var(--color-surface-container-low);
}

/* $INPUTS ------------------------------------------------------------------ */
.ss-label {
  display: block;
  margin-bottom: var(--space-2);
  font: 600 var(--text-label-caps) / 1 var(--font-body);
  letter-spacing: var(--text-label-caps--letter-spacing);
  color: var(--color-on-surface);
}

.ss-input {
  box-sizing: border-box;
  width: 100%;
  height: var(--control-height-prominent);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-on-surface);
  font: 400 var(--text-body) / var(--text-body--line-height) var(--font-body);
}

.ss-input::placeholder {
  color: var(--color-on-surface-variant);
}

.ss-input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.ss-input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.ss-error {
  margin-top: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-danger);
}

/* $CONTAINERS -------------------------------------------------------------- */
.ss-card {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  background: var(--color-surface-container-lowest);
  padding: var(--space-4);
}

.ss-card--elevated {
  background: var(--color-surface-container);
}

.ss-thumb {
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: var(--radius-card);
}

/* $CHIPS ------------------------------------------------------------------- */
.ss-chip {
  display: inline-flex;
  align-items: center;
  height: var(--chip-height);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  background: var(--color-surface-container-low);
  color: var(--color-on-surface-variant);
  font: 600 var(--text-label-caps) / 1 var(--font-body);
  letter-spacing: var(--text-label-caps--letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Tinted chip: 15% wash of its color with a solid border of the same color. */
.ss-chip--nm  { --chip: var(--color-condition-nm); }
.ss-chip--lp  { --chip: var(--color-condition-lp); }
.ss-chip--mp  { --chip: var(--color-condition-mp); }
.ss-chip--hp  { --chip: var(--color-condition-hp); }
.ss-chip--dmg { --chip: var(--color-condition-dmg); }
.ss-chip--low { --chip: var(--color-warning); }
.ss-chip--out { --chip: var(--color-danger); }

.ss-chip[class*="ss-chip--"] {
  border-color: var(--chip);
  color: var(--chip);
  background: color-mix(in srgb, var(--chip) 15%, transparent);
}

/* $PIPS -------------------------------------------------------------------- */
.ss-pip {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  vertical-align: middle;
}

.ss-pip--common   { background: var(--color-rarity-common); }
.ss-pip--uncommon { background: var(--color-rarity-uncommon); }
.ss-pip--rare     { background: var(--color-rarity-rare); }
.ss-pip--mythic   { background: var(--color-rarity-mythic); }
.ss-pip--special  { background: var(--color-tertiary); }

/* $PRICE ------------------------------------------------------------------- */
.ss-price {
  font: 600 var(--text-price) / 1 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface);
}

.ss-price__delta {
  font-size: var(--text-body-sm);
  font-weight: 400;
}

.ss-price__delta--up   { color: var(--color-success); }
.ss-price__delta--down { color: var(--color-danger); }

/* $MOTION — honor the OS setting ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ss-theme *,
  .ss-theme ::before,
  .ss-theme ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}