/* ============================================================
   AARA Fine Jewelry — Core Tokens (Colors & Type)
   Load this first; every other stylesheet depends on these vars.
   ============================================================ */

/* Webfonts — using Google Fonts CDN. If offline, copy .woff2 into fonts/
   and swap to local @font-face declarations.  */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&family=Marcellus&display=swap');

:root {
  /* ---------- 01 · Brand Palette (raw) ----------
     5 pillars from the brand board: Heritage Green · Brushed Gold · Sand · Marble Greige · Soft Charcoal
     Re-derived from brand guidelines anchors: gold #C7A75B · green #1E3A34 · warm neutral #E6E3DE · light neutral #F3F0EB · ink #111111 · mineral green #4F6B61 */

  --heritage-green-900: #11211E;
  --heritage-green-800: #1E3A34;   /* ★ primary brand green — per guidelines */
  --heritage-green-700: #2B544B;
  --heritage-green-600: #3B7266;
  --heritage-green-100: #DDEDEA;   /* tinted bg wash */

  --brushed-gold-900: #725B26;
  --brushed-gold-800: #9F8036;
  --brushed-gold-700: #C09D48;
  --brushed-gold-600: #C7A75B;     /* ★ primary gold — per guidelines */
  --brushed-gold-500: #D1B779;
  --brushed-gold-400: #DAC594;
  --brushed-gold-300: #E7DABA;
  --brushed-gold-100: #F5F0E4;     /* gold tint wash */

  --sand-900: #A8936F;
  --sand-700: #C5B79F;
  --sand-500: #DED6C8;
  --sand-400: #E6DFD5;             /* soft warm neutral — cards, sections */
  --sand-300: #EDE9E2;
  --sand-200: #F1EEE8;
  --sand-100: #F3F0EB;             /* ★ light card bg — per guidelines */

  --marble-greige-900: #796E5C;
  --marble-greige-700: #B2A899;
  --marble-greige-500: #CEC8BF;
  --marble-greige-400: #D9D5CD;
  --marble-greige-300: #E2DED9;
  --marble-greige-200: #E6E3DF;    /* ★ default page bg — per guidelines */
  --marble-greige-100: #EDEBE7;

  --soft-charcoal-900: #161616;
  --soft-charcoal-800: #212121;    /* primary text alternate */
  --soft-charcoal-700: #333333;
  --soft-charcoal-500: #6D6D6D;
  --soft-charcoal-300: #A8A8A8;

  --ivory: #F9F7F5;                /* brightest off-white, hero canvases */
  --parchment: #F5F3EF;            /* warmer off-white, packaging */
  --ink: #111111;                  /* ★ per brand guidelines */
  --mineral-green: #4F6B61;        /* secondary accent per guidelines */

  /* ---------- 02 · Semantic Colors ---------- */

  /* Surfaces */
  --bg-canvas: var(--marble-greige-200);       /* default page */
  --bg-surface: var(--sand-100);               /* cards, sections */
  --bg-surface-alt: var(--parchment);          /* hero / packaging feel */
  --bg-elevated: var(--ivory);                 /* modals, top layer */
  --bg-inverse: var(--heritage-green-800);     /* dark sections */
  --bg-inverse-deep: var(--heritage-green-900);

  /* Text */
  --fg-primary: var(--heritage-green-800);     /* default body text */
  --fg-secondary: var(--soft-charcoal-700);
  --fg-muted: var(--soft-charcoal-500);
  --fg-subtle: var(--marble-greige-700);
  --fg-on-dark: var(--sand-100);               /* text on green/charcoal */
  --fg-on-dark-muted: var(--sand-400);
  --fg-accent: var(--brushed-gold-600);        /* gold accents / eyebrows */
  --fg-accent-deep: var(--brushed-gold-800);

  /* Lines & strokes */
  --line-hairline: rgba(30, 58, 52, 0.16);     /* green @ 16% */
  --line-soft: rgba(30, 58, 52, 0.08);
  --line-gold: rgba(199, 167, 91, 0.45);
  --line-gold-soft: rgba(199, 167, 91, 0.18);
  --line-on-dark: rgba(246, 239, 223, 0.22);

  /* States */
  --state-success: var(--heritage-green-700);
  --state-error: #8C3A2E;          /* muted oxide red — not bright */
  --state-info: var(--heritage-green-600);

  /* ---------- 03 · Type Families ---------- */
  --font-serif: 'Cormorant Garamond', 'Marcellus', 'EB Garamond', Garamond, 'Times New Roman', serif;
  --font-display: 'Marcellus', 'Cormorant Garamond', Garamond, serif; /* all-caps spec'd */
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- 04 · Type Scale (1.25 base, editorial) ---------- */
  --fs-xxs: 11px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-2xl: 36px;
  --fs-3xl: 48px;
  --fs-4xl: 64px;
  --fs-5xl: 88px;
  --fs-6xl: 120px;

  /* Tracking — luxury brands tend wide on caps, tight on display serif */
  --tracking-tightest: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;     /* small caps, eyebrows */
  --tracking-widest: 0.24em;    /* nav, labels, FINE JEWELRY */

  --leading-tight: 1.05;
  --leading-snug: 1.18;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;

  /* ---------- 05 · Spacing (8pt soft grid) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ---------- 06 · Radii ---------- */
  /* Radii stay subtle and architectural. Large radii reserved for arch-shapes.  */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-card: 2px;          /* cards/cards prefer near-sharp corners */
  --radius-pill: 999px;
  --radius-arch: 240px 240px 0 0; /* top-rounded arch shape */

  /* ---------- 07 · Shadows ---------- */
  /* Shadows are soft, warm, low-contrast — never dark drop shadows.  */
  --shadow-none: none;
  --shadow-hairline: 0 0 0 1px var(--line-soft);
  --shadow-card: 0 1px 2px rgba(30, 58, 52, 0.04), 0 8px 24px rgba(30, 58, 52, 0.05);
  --shadow-lift: 0 2px 6px rgba(30, 58, 52, 0.06), 0 16px 40px rgba(30, 58, 52, 0.08);
  --shadow-inset-hairline: inset 0 0 0 1px var(--line-hairline);

  /* ---------- 08 · Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1);     /* calm, elegant */
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);         /* soft landing */
  --ease-exit: cubic-bezier(0.4, 0, 0.8, 0.6);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 560ms;
  --dur-hero: 900ms;

  /* ---------- 09 · Layout ---------- */
  --container-narrow: 680px;
  --container-text: 880px;
  --container-base: 1240px;
  --container-wide: 1480px;
  --container-max: 1680px;
  --page-gutter: clamp(20px, 4vw, 56px);
}

/* ==============================================================
   Semantic type utilities — `.aara-h1`, `.aara-eyebrow`, etc.
   Use these instead of rolling one-off type specs.
   ============================================================== */

.aara-display,
.aara-h1,
.aara-h2,
.aara-h3,
.aara-quote {
  font-family: var(--font-serif);
  color: var(--fg-primary);
  font-weight: 400;
  text-wrap: pretty;
}

.aara-display {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-4xl), 8vw, var(--fs-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}

.aara-h1 {
  font-size: clamp(var(--fs-3xl), 6vw, var(--fs-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  font-style: italic;  /* signature move — italicize the hero headline */
  font-weight: 300;
}

.aara-h2 {
  font-size: clamp(var(--fs-2xl), 4.2vw, var(--fs-4xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.aara-h3 {
  font-size: var(--fs-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}

.aara-quote {
  font-size: var(--fs-2xl);
  line-height: var(--leading-snug);
  font-style: italic;
  font-weight: 300;
  color: var(--fg-primary);
}

.aara-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  font-weight: 400;
}

.aara-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
  font-weight: 300;
}

.aara-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

/* Eyebrow — wide-tracked uppercase, the brand's signature UI tell. */
.aara-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xxs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--fg-accent);
}

.aara-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-secondary);
}

.aara-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
  font-style: italic;
}

/* Decorative hairline divider with a gold diamond — recurring motif. */
.aara-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--line-gold);
}
.aara-rule::before,
.aara-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.aara-rule-diamond {
  width: 6px; height: 6px;
  background: var(--brushed-gold-600);
  transform: rotate(45deg);
}