/* ==========================================================================
   Akuna Estate — Design tokens
   Ported verbatim from the Claude Design system bundle
   (akuna-estate-design-system-857ccefc.../tokens/*.css). Values unchanged.
   ========================================================================== */

/* ---- Fonts ---- */
/* Webfonts — all four families are served from Google Fonts.
   Shippori Mincho B1 ... display headings
   Cormorant Garamond ... elegant serif accents, italics, prices
   Jost ............... body & UI sans
   IBM Plex Mono ...... placeholder / spec labels */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Shippori+Mincho+B1:wght@600;700&family=Jost:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400&display=swap");

/* ---- Colors ---- */
/* A warm, earthy palette: deep forest green + terracotta on cream.
   Base ramps first, then semantic aliases. */
:root {
  /* --- Warm neutrals (paper & surfaces) --- */
  --cream:        #F5F2EE; /* page background */
  --sand:         #E8E2D8; /* secondary section surface */
  --white:        #FFFFFF; /* card surface */
  --input-bg:     #FBF9F5; /* form field fill */

  /* --- Forest greens (brand dark) --- */
  --forest:       #20372E; /* primary dark — headings on light, dark sections */
  --forest-deep:  #1A2E26; /* mobile nav, deepest panels */

  /* --- Terracotta & clay (brand accent) --- */
  --terracotta:      #C27E2B; /* primary action / accent */
  --terracotta-deep: #AD7424; /* primary hover */
  --clay:            #8C5D3B; /* links on light, secondary badges */

  /* --- Gold & champagne (warm metallics) --- */
  --gold:       #AD8865; /* eyebrows / kickers */
  --champagne:  #D8C7AC; /* gold text on dark, big serif numerals */

  /* --- Text on light --- */
  --ink:        #513C2D; /* body copy */
  --ink-soft:   #6F5C49; /* muted body / captions */

  /* --- Text on dark --- */
  --on-dark:        #E8E2D8; /* primary text on forest */
  --on-dark-soft:   #CBD5CD; /* body text on forest */
  --on-dark-muted:  #9FB0A4; /* muted / struck-through on forest */

  /* --- Lines & borders --- */
  --border-soft:  #E0D8CB; /* default card / divider on light */
  --border-tan:   #CDBEAE; /* stronger tan border, grid hairlines */
  --border-line:  #DDD4C6; /* FAQ / list rules */
  --border-input: #D8CDBC; /* form field border */

  /* --- Semantic --- */
  --success:    #1F8A5B;
  --error:      #B23A48;
  --error-line: #D08A92;
  --valentine:  #CC3366;

  /* --- Semantic surface / text aliases --- */
  --surface-page:    var(--cream);
  --surface-alt:     var(--sand);
  --surface-card:    var(--white);
  --surface-dark:    var(--forest);
  --text-heading:    var(--forest);
  --text-body:       var(--ink);
  --text-muted:      var(--ink-soft);
  --text-eyebrow:    var(--gold);
  --text-link:       var(--clay);
  --action:          var(--terracotta);
  --action-hover:    var(--terracotta-deep);
}

/* ---- Typography ---- */
/* Three voices working together:
   - Shippori Mincho B1 (display serif) — section & page headings, confident weight
   - Cormorant Garamond (light serif)  — romantic accents, italics, large prices
   - Jost (geometric sans)             — all body copy, UI, eyebrows, buttons
   - IBM Plex Mono ...... placeholder / spec captions only */
:root {
  --font-display: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --font-serif:   "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;

  /* Weights actually used in the system */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;

  /* Display / heading scale (fluid) */
  --fs-hero:     clamp(40px, 6.4vw, 82px);
  --fs-h2:       clamp(28px, 4vw, 46px);
  --fs-h3:       clamp(24px, 2vw, 28px);
  --fs-price:    clamp(64px, 8vw, 96px);

  /* Body scale */
  --fs-lead:     clamp(16px, 1.8vw, 20px);
  --fs-body:     16px;
  --fs-body-sm:  15px;
  --fs-caption:  14px;
  --fs-eyebrow:  12px;
  --fs-micro:    11px;

  /* Eyebrow / kicker treatment */
  --eyebrow-spacing: 0.22em;
  --eyebrow-transform: uppercase;

  /* Button label treatment */
  --label-spacing: 0.14em;

  /* Line heights */
  --lh-tight:   1.14;
  --lh-snug:    1.3;
  --lh-body:    1.75;
}

/* ---- Spacing, radii, shadows & motion ---- */
:root {
  /* Layout */
  --container:        1280px; /* header / hero outer width */
  --container-narrow: 1200px; /* section content width */
  --container-prose:  880px;  /* FAQ / single-column reading width */
  --section-pad:      clamp(72px, 10vw, 128px); /* vertical section rhythm */
  --gutter:           clamp(20px, 5vw, 48px);   /* horizontal page padding */

  /* Spacing steps */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 32px;
  --space-7: 44px;
  --space-8: 64px;

  /* Radii — the system is restrained: sharp actions, soft cards */
  --radius-action: 6px;  /* buttons, inline badges (updated per design review) */
  --radius-sm:     3px;  /* inputs, small media */
  --radius-card:   6px;  /* cards, image frames, panels */
  --radius-lg:     8px;  /* form container, floating CTA */
  --radius-pill:   20px; /* pill badges, chips */
  --radius-round:  50%;  /* icon discs */

  /* Shadows — long, soft, warm-toned (never neutral grey) */
  --shadow-card:     0 24px 50px -34px rgba(81, 60, 45, 0.40);
  --shadow-card-lg:  0 30px 60px -36px rgba(81, 60, 45, 0.50);
  --shadow-panel:    0 30px 60px -30px rgba(32, 55, 46, 0.60);
  --shadow-float:    0 24px 50px -20px rgba(20, 32, 26, 0.70);

  /* Motion */
  --ease-reveal: cubic-bezier(.2, .7, .2, 1);
  --ease-ui:     ease;
  --dur-reveal:  1s;
  --dur-ui:      .3s;
  --hover-lift:  translateY(-2px);
}