/* Grace Okada — Webfonts
 * SUBSTITUTION NOTE: Grace Okada's printed/site materials use a high-contrast
 * Didone-style serif with a refined geometric sans. No original font binaries
 * were provided, so the nearest Google Fonts matches are used:
 *   - Display serif  : Cormorant Garamond  (high-contrast Garamond, luxe)
 *   - Text sans      : Jost                (Futura-like geometric grotesque)
 *   - JP serif       : Noto Serif JP
 *   - JP sans        : Noto Sans JP
 * Replace with the licensed brand faces when available.
 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&family=Noto+Serif+JP:wght@400;500;600&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

/* Grace Okada — Color tokens
 * Palette: warm ink neutrals, champagne gold, ivory/pearl, deep garnet gem accent.
 * Restrained, gallery-like. Gold is a precious accent, never a fill for large areas.
 */
:root {
  /* ---- Warm ink neutrals (near-black -> ivory) ---- */
  --ink-900: #14110E; /* primary text, dark surfaces */
  --ink-800: #221C16;
  --ink-700: #322A20;
  --ink-600: #4A4034;
  --ink-500: #6B5E4E; /* secondary text */
  --ink-400: #918273; /* muted text, captions */
  --ink-300: #B9AC9B;
  --ink-200: #DCD3C5; /* hairline borders */
  --ink-100: #ECE6DB;
  --ink-50:  #F6F2EA; /* ivory page tint */
  --pearl:   #FBF9F4; /* lightest warm white */
  --white:   #FFFFFF;

  /* ---- Champagne gold (precious accent) ---- */
  --gold-100: #F4E9CD;
  --gold-200: #E9D5A6;
  --gold-300: #DCBE7C;
  --gold-400: #CDA856;
  --gold-500: #C29A47; /* primary gold */
  --gold-600: #A67E36;
  --gold-700: #82612A; /* gold text on light */
  --gold-foil: linear-gradient(135deg, #E9D29A 0%, #C29A47 38%, #8A6A2E 64%, #D9BE82 100%); /* @kind color */

  /* ---- Garnet (deep gem accent) ---- */
  --garnet-400: #8E3A41;
  --garnet-500: #722B33;
  --garnet-600: #5A2027;

  /* ---- Sapphire (rare, links/info only) ---- */
  --sapphire-500: #2C3E63;
  --sapphire-600: #20304F;

  /* ---- Status (muted, jewelry-toned) ---- */
  --sage-500:   #5E7059; /* success / available */
  --amber-500:  #B0863A; /* warning / low stock */
  --garnet-err: #8E3A41; /* error / sold */

  /* ====== Semantic aliases ====== */
  --bg-page:        var(--ink-50);
  --bg-page-deep:   var(--ink-900);
  --surface-card:   var(--white);
  --surface-sunken: var(--pearl);
  --surface-dark:   var(--ink-900);
  --surface-dark-2: var(--ink-800);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-400);
  --text-on-dark:   var(--ink-50);
  --text-on-dark-mut: var(--ink-300);
  --text-gold:      var(--gold-700);

  --border-hairline: var(--ink-200);
  --border-strong:   var(--ink-300);
  --border-dark:     rgba(255,255,255,0.16);
  --border-gold:     var(--gold-400);

  --accent:        var(--gold-500);
  --accent-strong: var(--gold-700);
  --accent-soft:   var(--gold-100);

  --focus-ring: var(--gold-500);
}

/* Grace Okada — Typography tokens
 * Editorial luxury: high-contrast serif for display, geometric sans for UI/labels.
 * Labels are uppercase with wide tracking (the "maison" voice).
 */
:root {
  /* ---- Families ---- */
  --font-serif: "Cormorant Garamond", "Noto Serif JP", "Times New Roman", serif;
  --font-sans:  "Jost", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --font-jp-serif: "Noto Serif JP", "Cormorant Garamond", serif;
  --font-jp-sans:  "Noto Sans JP", "Jost", sans-serif;

  /* ---- Weights ---- */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* ---- Display / editorial serif scale (fluid-ish, fixed here) ---- */
  --type-display:   400 clamp(56px, 7vw, 96px)/1.02 var(--font-serif);
  --type-h1:        500 48px/1.06 var(--font-serif);
  --type-h2:        500 36px/1.12 var(--font-serif);
  --type-h3:        500 27px/1.2  var(--font-serif);
  --type-serif-lead: 400 22px/1.5 var(--font-serif); /* italic-friendly intro */

  /* ---- Sans / UI scale ---- */
  --type-body-lg: 400 17px/1.65 var(--font-sans);
  --type-body:    400 15px/1.6  var(--font-sans);
  --type-body-sm: 400 13px/1.55 var(--font-sans);
  --type-caption: 400 12px/1.4  var(--font-sans);

  /* ---- Eyebrow / label (uppercase, tracked) ---- */
  --type-label:    500 12px/1   var(--font-sans);
  --type-label-sm: 500 10.5px/1 var(--font-sans);

  /* ---- Tracking ---- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-label:  0.22em;  /* eyebrows, nav, buttons */
  --tracking-loose:  0.34em;  /* logotype / rare display labels */
}

/* Grace Okada — Spacing tokens
 * 4px base. Generous, gallery-like rhythm; large section padding.
 */
:root {
  --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;
  --space-32: 128px;

  /* Semantic */
  --gutter: var(--space-6);
  --section-y: var(--space-24);     /* vertical section padding (desktop) */
  --container-max: 1280px;
  --container-narrow: 760px;        /* editorial text column */
}

/* Grace Okada — Elevation, radii, borders, motion
 * Luxury restraint: hairline borders do most of the work; shadows are faint and warm.
 * Corners are nearly square — refinement reads as precision, not softness.
 */
:root {
  /* ---- Radii (minimal) ---- */
  --radius-none: 0;
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-thin: 1px solid var(--border-hairline);
  --border-thin-strong: 1px solid var(--border-strong);
  --hairline-gold: 1px solid var(--border-gold);

  /* ---- Shadows (faint, warm-tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(20,17,14,0.05);
  --shadow-sm: 0 2px 8px rgba(20,17,14,0.06);
  --shadow-md: 0 8px 28px rgba(20,17,14,0.08);
  --shadow-lg: 0 20px 60px rgba(20,17,14,0.12);
  --shadow-gold-glow: 0 0 0 1px var(--gold-300), 0 8px 28px rgba(130,97,42,0.14);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 480ms; /* @kind other */

  /* ---- Layout ---- */
  --z-header: 100; /* @kind other */
  --z-overlay: 800; /* @kind other */
  --z-modal: 900; /* @kind other */
  --z-toast: 1000; /* @kind other */
}

/* Grace Okada — base element styling & a few utility primitives.
 * Light reset + editorial defaults so bare HTML already feels on-brand.
 */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 0.4em;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}
h1 { font: var(--type-h1); }
h2 { font: var(--type-h2); }
h3 { font: var(--type-h3); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-primary); text-decoration: none; }
a:hover { color: var(--accent-strong); }

::selection { background: var(--gold-200); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

hr {
  border: none;
  border-top: var(--border-thin);
  margin: var(--space-8) 0;
}

/* ---- Brand utility primitives ---- */

/* Eyebrow / overline label — the maison voice */
.go-eyebrow {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-gold);
}

/* Gold foil text (use sparingly — logotype, hero numerals) */
.go-foil-text {
  background: var(--gold-foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hairline rule with centered gold diamond — section divider motif */
.go-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--border-strong);
}
.go-rule::before,
.go-rule::after {
  content: "";
  height: 1px;
  width: 56px;
  background: currentColor;
}
.go-rule__mark {
  width: 6px; height: 6px;
  transform: rotate(45deg);
  background: var(--gold-500);
}

/* Editorial container */
.go-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-6); }
.go-prose { max-width: var(--container-narrow); }