/**
 * JewDIY Brand Design System - shared tokens & typography
 * Moss green + warm gold on cream paper - jewelry atelier, not workshop.
 */

:root {
  /* Core palette */
  --jewdiy-ink: #1a1f18;
  --jewdiy-ink-soft: #2c3329;
  --jewdiy-muted: #6b7168;
  --jewdiy-muted-light: #8a9086;
  --jewdiy-paper: #f9f6f0;
  --jewdiy-cream: #fffdf8;
  --jewdiy-white: #ffffff;
  --jewdiy-moss: #1f5137;
  --jewdiy-moss-mid: #2a6648;
  --jewdiy-moss-light: #edf6ef;
  --jewdiy-gold: #b8862d;
  --jewdiy-gold-soft: #d4a853;
  --jewdiy-gold-pale: #f5ead4;
  --jewdiy-line: #e6e0d4;
  --jewdiy-line-strong: #d4cdc0;
  --jewdiy-danger: #9b3d35;
  --jewdiy-warn: #a56420;
  --jewdiy-ok: #2f6f48;

  /* Elevation & shape */
  --jewdiy-radius-sm: 8px;
  --jewdiy-radius: 12px;
  --jewdiy-radius-lg: 18px;
  --jewdiy-radius-xl: 24px;
  --jewdiy-shadow-sm: 0 4px 16px rgba(26, 31, 24, 0.06);
  --jewdiy-shadow: 0 16px 48px rgba(26, 31, 24, 0.08);
  --jewdiy-shadow-lg: 0 28px 80px rgba(26, 31, 24, 0.12);
  --jewdiy-gold-line: linear-gradient(90deg, transparent, var(--jewdiy-gold-soft) 20%, var(--jewdiy-gold) 50%, var(--jewdiy-gold-soft) 80%, transparent);

  /* Typography */
  --jewdiy-font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jewdiy-font-display: Georgia, "Times New Roman", Times, serif;

  /* Layout */
  --jewdiy-admin-canvas: 1440px;
  --jewdiy-admin-main: min(1416px, calc(100vw - 48px));
  --jewdiy-store-canvas: 1480px;

  /* Motion */
  --jewdiy-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --jewdiy-duration: 0.22s;

  /* Bridge legacy admin tokens */
  --ink: var(--jewdiy-ink);
  --muted: var(--jewdiy-muted);
  --line: var(--jewdiy-line);
  --paper: var(--jewdiy-paper);
  --white: var(--jewdiy-white);
  --green: var(--jewdiy-moss);
  --green-2: var(--jewdiy-moss-mid);
  --cream: var(--jewdiy-cream);
  --shadow: var(--jewdiy-shadow);
  --moss: var(--jewdiy-moss);
  --gold: var(--jewdiy-gold);
}

/* Base refinements when brand system is loaded */
body.jewdiy-branded {
  font-family: var(--jewdiy-font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.jewdiy-display {
  font-family: var(--jewdiy-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.jewdiy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jewdiy-gold);
}

.jewdiy-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--jewdiy-gold-line);
}

.jewdiy-card {
  border: 1px solid rgba(230, 224, 212, 0.92);
  border-radius: var(--jewdiy-radius-lg);
  background: rgba(255, 253, 248, 0.92);
  box-shadow: var(--jewdiy-shadow-sm);
}

.jewdiy-gold-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--jewdiy-gold-line);
  opacity: 0.85;
}

/* Shared button polish */
.jewdiy-btn,
.pill.jewdiy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--jewdiy-line);
  background: var(--jewdiy-white);
  color: var(--jewdiy-ink);
  font: 600 13px/1 var(--jewdiy-font-ui);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--jewdiy-duration) var(--jewdiy-ease),
    border-color var(--jewdiy-duration) var(--jewdiy-ease),
    box-shadow var(--jewdiy-duration) var(--jewdiy-ease),
    transform var(--jewdiy-duration) var(--jewdiy-ease);
}

.jewdiy-btn:hover {
  border-color: var(--jewdiy-line-strong);
  box-shadow: var(--jewdiy-shadow-sm);
}

.jewdiy-btn.primary,
.pill.primary.jewdiy-btn {
  border-color: transparent;
  background: linear-gradient(135deg, var(--jewdiy-moss) 0%, var(--jewdiy-moss-mid) 100%);
  color: #fff;
}

.jewdiy-btn.primary:hover {
  box-shadow: 0 8px 24px rgba(31, 81, 55, 0.28);
  transform: translateY(-1px);
}

.jewdiy-btn.ghost {
  background: transparent;
  border-color: rgba(230, 224, 212, 0.8);
}

/* Focus ring for accessibility */
.jewdiy-branded :focus-visible {
  outline: 2px solid var(--jewdiy-gold-soft);
  outline-offset: 2px;
}