/* ============================================================
   Sovana Design System — Colors & Type
   Source: Sovana.fig / Brand Kit
   ============================================================ */

/* -------- Fonts --------
   Butler — display serif (wordmark, headings). Local OTFs.
   ADLaM Display — decorative script for ornamental letterforms (logomark S).
   Plus Jakarta Sans — UI + body sans, ExtraBold used heavily for labels.
*/
@import url('https://fonts.googleapis.com/css2?family=ADLaM+Display&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

@font-face { font-family: 'Butler'; font-weight: 200; font-style: normal; src: url('fonts/Butler_Ultra_Light.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Butler'; font-weight: 300; font-style: normal; src: url('fonts/Butler_Light.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Butler'; font-weight: 400; font-style: normal; src: url('fonts/Butler_Regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Butler'; font-weight: 500; font-style: normal; src: url('fonts/Butler_Medium.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Butler'; font-weight: 700; font-style: normal; src: url('fonts/Butler_Bold.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Butler'; font-weight: 800; font-style: normal; src: url('fonts/Butler_ExtraBold.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Butler'; font-weight: 900; font-style: normal; src: url('fonts/Butler_Black.otf') format('opentype'); font-display: swap; }

:root {
  /* ============================================================
     COLOR — Brand Core
     ============================================================ */

  /* Deep tones — primary brand navy + ink */
  --sovana-teal:        rgb(27, 42, 59);   /* #1B2A3B  — Primary UI / buttons */
  --deep-teal:          rgb(22, 34, 51);   /* #162233  — Hover on primary */
  --midnight-teal:      rgb(15, 29, 43);   /* #0F1D2B  — Deepest navy, selected */
  --obsidian:           rgb(26, 26, 23);   /* #1A1A17  — Near-black, backdrop */
  --night-owl:          rgb(42, 37, 32);   /* #2A2520  — Warm black, text */

  /* Signature gold */
  --sovana-gold:        rgb(196, 162, 101); /* #C4A265  — Brand accent, lines, halos */

  /* Earth & sand */
  --tuscan-earth:       rgb(139, 115, 85); /* #8B7355  — Secondary warm brown */
  --dusk:               rgb(92, 79, 61);   /* #5C4F3D  — Deeper brown */
  --sandstone:          rgb(212, 196, 174);/* #D4C4AE  — Warm neutral */
  --warm-sand:          rgb(232, 218, 202);/* #E8DACA  — Lighter warm neutral */

  /* Light neutrals — backgrounds */
  --cream:              rgb(245, 239, 228);/* #F5EFE4  — Default page bg */
  --linen:              rgb(251, 248, 243);/* #FBF8F3  — Lightest bg / surfaces */
  --white:              rgb(255, 255, 255);

  /* Accent spectrum (used sparingly) */
  --teal-mist:          rgb(211, 213, 246);/* #D3D5F6  — Cool pastel highlight */

  /* Semantic accents (used once in kit; reserve for status) */
  --success:            rgb(58, 158, 78);
  --danger:             rgb(182, 65, 65);

  /* Shadows */
  --shadow-soft:        rgba(0, 0, 0, 0.25);

  /* ============================================================
     SEMANTIC — Foreground & background roles
     ============================================================ */
  --bg-page:            var(--cream);
  --bg-surface:         var(--linen);
  --bg-inverse:         var(--obsidian);
  --bg-inverse-navy:    var(--sovana-teal);

  --fg-primary:         var(--night-owl);      /* primary body text on light */
  --fg-secondary:       var(--dusk);           /* secondary body text */
  --fg-muted:           var(--tuscan-earth);   /* captions, hint */
  --fg-on-dark:         var(--linen);          /* text on dark bg */
  --fg-on-dark-mute:    var(--warm-sand);
  --fg-accent:          var(--sovana-gold);

  --border-soft:        var(--sandstone);
  --border-strong:      var(--night-owl);
  --border-accent:      var(--sovana-gold);

  /* Button roles */
  --btn-primary-bg:         var(--sovana-teal);
  --btn-primary-bg-hover:   var(--deep-teal);
  --btn-primary-bg-selected:var(--midnight-teal);
  --btn-primary-bg-disabled:var(--warm-sand);
  --btn-primary-fg:         var(--cream);

  --btn-secondary-bg:       transparent;
  --btn-secondary-bg-hover: var(--night-owl);
  --btn-secondary-fg:       var(--night-owl);
  --btn-secondary-fg-hover: var(--cream);
  --btn-secondary-border:   var(--night-owl);

  /* ============================================================
     TYPE — families
     ============================================================ */
  --font-display:   'Butler', 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-script:    'ADLaM Display', 'Brush Script MT', cursive;
  --font-sans:      'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ============================================================
     TYPE — scale (display & body)
     Figma showed: Display 72px (Butler), Labels 13/15/16 (Jakarta 700/800).
     ============================================================ */
  --fs-display:     4.5rem;    /* 72px — hero serif */
  --fs-h1:          3.25rem;   /* 52px */
  --fs-h2:          2.5rem;    /* 40px */
  --fs-h3:          1.875rem;  /* 30px */
  --fs-h4:          1.375rem;  /* 22px */
  --fs-eyebrow:     0.8125rem; /* 13px — small caps, Jakarta 700 */
  --fs-body-lg:     1.125rem;  /* 18px */
  --fs-body:        1rem;      /* 16px */
  --fs-body-sm:     0.9375rem; /* 15px */
  --fs-caption:     0.8125rem; /* 13px */

  --lh-tight:       1.05;
  --lh-display:     1.1;
  --lh-heading:     1.2;
  --lh-body:        1.6;

  --tracking-eyebrow: 0.14em;  /* generous caps tracking */
  --tracking-label:   0.05em;  /* Figma buttons/labels */
  --tracking-display: -0.01em;

  /* ============================================================
     RADII, SHADOW, SPACING
     Figma buttons: radius 8 • label padding ~ 14/28 (default) • shadows soft
     ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;     /* buttons, inputs */
  --radius-lg: 12px;    /* cards */
  --radius-xl: 20px;    /* chips, check tile */
  --radius-pill: 999px;

  --shadow-xs:   0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:   0 2px 4px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.18);
  --shadow-inset:inset 0 2px 2px rgba(0,0,0,0.25), inset 0 -2px 2px rgba(0,0,0,0.25);

  --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;

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
   Semantic text presets
   ============================================================ */
.sv-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-primary);
}
.sv-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-primary);
}
.sv-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
}
.sv-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
}
.sv-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--fg-primary);
}
.sv-eyebrow {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.sv-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-primary);
}
.sv-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
}
.sv-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-secondary);
}
.sv-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-muted);
}
.sv-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-label);
  color: var(--fg-primary);
}
.sv-script {
  font-family: var(--font-script);
  font-weight: 400;
}