/* =========================================================
   Ozian · Design System — Colors & Type
   v1.0 · 2026
   ========================================================= */

@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* Cormorant Garamond — the brand display face */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* ---------- Color Tokens ---------- */
:root {
  /* Brand */
  --emerald:        #1F3B2D;   /* Primary. Letterforms, headings, primary UI. */
  --emerald-deep:   #162A20;   /* Pressed / deep surface */
  --emerald-ink:    #0F2017;   /* Max contrast text on cream */
  --emerald-tint:   #2E513F;   /* Hover on primary */
  --emerald-wash:   #E8EDE8;   /* Soft tint surface */

  --gold:           #C9A24B;   /* Accent only. Underline, selected, highlight. */
  --gold-deep:      #A8853A;   /* Hover on gold */
  --gold-wash:      #F2E9D2;   /* Soft gold tint */

  --cream:          #F5F3EE;   /* Default page background */
  --cream-deep:     #ECE9E0;   /* Secondary surface */
  --warm-gray:      #D5D2C8;   /* Borders, dividers */
  --warm-gray-soft: #E2DFD6;   /* Subtle dividers */
  --off-white:      #FFFFFF;   /* Reversed / cards on cream */
  --black:          #14120E;   /* Rare. True black on cream for emphasis. */

  /* Semantic — Foreground */
  --fg-1: var(--emerald-ink);  /* Primary text */
  --fg-2: #3B4A40;             /* Secondary text */
  --fg-3: #6B7670;             /* Tertiary / metadata */
  --fg-inverse: var(--cream);  /* On emerald */
  --fg-accent: var(--gold-deep);

  /* Semantic — Background */
  --bg-page:    var(--off-white);   /* default white per Ozian landing spec */
  --bg-surface: var(--off-white);
  --bg-sunken:  var(--cream);       /* warm neutral for section variation */
  --bg-ink:     var(--emerald);

  /* Semantic — Border */
  --border-hairline: var(--warm-gray-soft);
  --border-default:  var(--warm-gray);
  --border-strong:   #B7B2A3;
  --border-ink:      var(--emerald);
  --rule-gold:       var(--gold);

  /* Typography stacks */
  --font-display: 'Cormorant Garamond', 'Playfair Display', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* Type scale — display */
  --fs-hero:       clamp(56px, 7vw, 96px);
  --fs-display:    clamp(44px, 5vw, 64px);
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         26px;
  --fs-sub:        22px;

  /* Type scale — text */
  --fs-lead:       18px;
  --fs-body:       13px;
  --fs-body-lg:    15px;
  --fs-caption:    11px;
  --fs-meta:       9px;

  /* Line heights */
  --lh-tight:  1.08;
  --lh-snug:   1.22;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* Letter spacing */
  --ls-hero:    -0.02em;
  --ls-display: -0.015em;
  --ls-caps:    0.08em;
  --ls-meta:    0.12em;

  /* Spacing (8-based with 4-step) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* Radius — restrained, editorial */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* Elevation — subtle, paper-like */
  --shadow-1: 0 1px 0 rgba(22, 42, 32, 0.04), 0 1px 2px rgba(22, 42, 32, 0.06);
  --shadow-2: 0 2px 4px rgba(22, 42, 32, 0.06), 0 6px 16px rgba(22, 42, 32, 0.06);
  --shadow-3: 0 8px 24px rgba(22, 42, 32, 0.10), 0 2px 6px rgba(22, 42, 32, 0.05);
  --shadow-inset: inset 0 0 0 1px rgba(22, 42, 32, 0.06);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 0.84, 0.34, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   380ms;
}

/* =========================================================
   Semantic element defaults
   ========================================================= */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  color: var(--emerald);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--emerald);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--emerald);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--emerald);
  margin: 0;
}

.subhead, h4, .h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-sub);
  line-height: 1.35;
  color: var(--emerald);
  margin: 0;
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  margin: 0;
}

.body-lg { font-size: var(--fs-body-lg); }

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-3);
}

.meta {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--fg-3);
}

.pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 28px;
  line-height: 1.35;
  color: var(--emerald);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--emerald-ink);
  background: var(--cream-deep);
  padding: 1px 5px;
  border-radius: var(--radius-1);
}

a {
  color: var(--emerald);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--gold-deep); }

hr.gold-rule {
  border: 0;
  height: 1px;
  background: var(--gold);
}