/* ============================================================
   SWAN TOURS — Design Tokens
   colors_and_type.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&family=Inter:wght@300;400;500;600&display=swap');

/* ============================================================
   COLOR PRIMITIVES
   ============================================================ */
:root {
  /* Brand Blues */
  --navy-900: #0D1E33;
  --navy-800: #111E31;
  --navy-700: #152540;
  --navy-600: #1C3154;   /* ← Primary brand navy */
  --navy-500: #264573;
  --navy-400: #3A6099;
  --navy-300: #6A8FB8;
  --navy-200: #A8C0D6;
  --navy-100: #D4E2EF;
  --navy-50:  #EDF3F8;

  /* Gold Accents */
  --gold-900: #5C3D00;
  --gold-800: #7A5200;
  --gold-700: #9B6D0A;
  --gold-600: #B8861E;
  --gold-500: #C4973A;   /* ← Primary brand gold */
  --gold-400: #D4AE5C;
  --gold-300: #E2C882;
  --gold-200: #EDD9A8;
  --gold-100: #F5EBCD;
  --gold-50:  #FBF6EA;

  /* Warm Neutrals */
  --stone-900: #2C1F14;
  --stone-800: #4A3828;
  --stone-700: #6B5240;
  --stone-600: #8C7B6A;   /* ← Secondary text */
  --stone-500: #A89889;
  --stone-400: #C2B4A8;
  --stone-300: #D9D3CB;   /* ← Fog / borders */
  --stone-200: #EAE4DC;
  --stone-100: #F0E9DC;   /* ← Parchment */
  --stone-50:  #FAF7F2;   /* ← Cream background */

  /* Pure */
  --white: #FFFFFF;
  --black: #000000;

  /* ============================================================
     SEMANTIC COLOR TOKENS
     ============================================================ */

  /* Backgrounds */
  --bg-page:        var(--stone-50);    /* Main page background */
  --bg-section-alt: var(--stone-100);  /* Alternating section */
  --bg-card:        var(--white);
  --bg-dark:        var(--navy-600);
  --bg-dark-deep:   var(--navy-800);

  /* Foregrounds / Text */
  --fg-primary:     var(--navy-800);   /* Headings, primary text */
  --fg-secondary:   var(--stone-600);  /* Secondary text, captions */
  --fg-muted:       var(--stone-400);  /* Placeholder, disabled */
  --fg-inverse:     var(--white);      /* Text on dark backgrounds */
  --fg-accent:      var(--gold-500);   /* Accent text, highlights */

  /* Brand */
  --brand-primary:  var(--navy-600);
  --brand-accent:   var(--gold-500);

  /* Interactive */
  --interactive-default:  var(--navy-600);
  --interactive-hover:    var(--navy-700);
  --interactive-active:   var(--navy-900);
  --interactive-focus:    var(--gold-500);

  /* Borders */
  --border-subtle:  var(--stone-300);
  --border-medium:  var(--stone-400);
  --border-strong:  var(--navy-600);
  --border-accent:  var(--gold-500);

  /* States */
  --state-success: #2D7A4F;
  --state-warning: #B86B1C;
  --state-error:   #9B2626;
  --state-info:    var(--navy-500);

  /* ============================================================
     TYPOGRAPHY TOKENS
     ============================================================ */

  /* Font Families */
  --font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-serif:    'Source Serif 4', Georgia, serif;
  --font-accent:   'Cormorant Garamond', Georgia, serif;
  --font-ui:       'Inter', system-ui, -apple-system, sans-serif;

  /* Font Sizes — Base 16px */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-md:   1.125rem;   /*  18px */
  --text-lg:   1.25rem;    /*  20px */
  --text-xl:   1.5rem;     /*  24px */
  --text-2xl:  1.875rem;   /*  30px */
  --text-3xl:  2.25rem;    /*  36px */
  --text-4xl:  3rem;       /*  48px */
  --text-5xl:  3.75rem;    /*  60px */
  --text-6xl:  4.5rem;     /*  72px */

  /* Font Weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Line Heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;
  --leading-loose:  2;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.14em;

  /* ============================================================
     SEMANTIC TYPE ROLES
     ============================================================ */

  /* Hero / Display — Playfair Display */
  --type-hero-family:   var(--font-display);
  --type-hero-size:     var(--text-6xl);
  --type-hero-weight:   var(--weight-regular);
  --type-hero-leading:  var(--leading-tight);
  --type-hero-tracking: var(--tracking-tight);

  /* H1 — Playfair Display */
  --type-h1-family:   var(--font-display);
  --type-h1-size:     var(--text-5xl);
  --type-h1-weight:   var(--weight-regular);
  --type-h1-leading:  var(--leading-tight);
  --type-h1-tracking: var(--tracking-tight);

  /* H2 */
  --type-h2-family:   var(--font-display);
  --type-h2-size:     var(--text-4xl);
  --type-h2-weight:   var(--weight-regular);
  --type-h2-leading:  var(--leading-snug);
  --type-h2-tracking: var(--tracking-tight);

  /* H3 */
  --type-h3-family:   var(--font-display);
  --type-h3-size:     var(--text-2xl);
  --type-h3-weight:   var(--weight-medium);
  --type-h3-leading:  var(--leading-snug);
  --type-h3-tracking: var(--tracking-normal);

  /* H4 — Cormorant Garamond */
  --type-h4-family:   var(--font-accent);
  --type-h4-size:     var(--text-xl);
  --type-h4-weight:   var(--weight-medium);
  --type-h4-leading:  var(--leading-snug);
  --type-h4-tracking: var(--tracking-wide);

  /* Label / Eyebrow — Inter, spaced caps */
  --type-label-family:   var(--font-ui);
  --type-label-size:     var(--text-xs);
  --type-label-weight:   var(--weight-medium);
  --type-label-leading:  var(--leading-normal);
  --type-label-tracking: var(--tracking-widest);

  /* Body */
  --type-body-family:   var(--font-serif);
  --type-body-size:     var(--text-md);
  --type-body-weight:   var(--weight-regular);
  --type-body-leading:  var(--leading-relaxed);
  --type-body-tracking: var(--tracking-normal);

  /* Body small */
  --type-body-sm-family:   var(--font-serif);
  --type-body-sm-size:     var(--text-base);
  --type-body-sm-weight:   var(--weight-regular);
  --type-body-sm-leading:  var(--leading-relaxed);

  /* UI / Caption — Inter */
  --type-ui-family:   var(--font-ui);
  --type-ui-size:     var(--text-sm);
  --type-ui-weight:   var(--weight-regular);
  --type-ui-leading:  var(--leading-normal);

  /* Pull Quote — Cormorant Garamond Italic */
  --type-quote-family:   var(--font-accent);
  --type-quote-size:     var(--text-3xl);
  --type-quote-weight:   var(--weight-light);
  --type-quote-leading:  var(--leading-snug);

  /* ============================================================
     SPACING SCALE (base 8px)
     ============================================================ */
  --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;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-full: 9999px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-xs:  0 1px 3px rgba(28, 49, 84, 0.06);
  --shadow-sm:  0 2px 8px rgba(28, 49, 84, 0.08);
  --shadow-md:  0 4px 16px rgba(28, 49, 84, 0.10);
  --shadow-lg:  0 8px 32px rgba(28, 49, 84, 0.12);
  --shadow-xl:  0 16px 48px rgba(28, 49, 84, 0.16);

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --transition-fast:   150ms ease;   /* @kind other */
  --transition-normal: 200ms ease;   /* @kind other */
  --transition-slow:   400ms ease-out; /* @kind other */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --max-width:       1200px;
  --content-width:   720px;
  --section-padding: var(--space-20);
  --nav-height:      72px;
}

/* ============================================================
   BASE STYLES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
h1 {
  font-family: var(--type-h1-family);
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  line-height: var(--type-h1-leading);
  letter-spacing: var(--type-h1-tracking);
  color: var(--fg-primary);
}
h2 {
  font-family: var(--type-h2-family);
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  line-height: var(--type-h2-leading);
  letter-spacing: var(--type-h2-tracking);
  color: var(--fg-primary);
}
h3 {
  font-family: var(--type-h3-family);
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  line-height: var(--type-h3-leading);
  letter-spacing: var(--type-h3-tracking);
  color: var(--fg-primary);
}
h4 {
  font-family: var(--type-h4-family);
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  line-height: var(--type-h4-leading);
  letter-spacing: var(--type-h4-tracking);
  color: var(--fg-primary);
}
p {
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  color: var(--fg-primary);
}
small {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--fg-secondary);
}
a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--transition-normal);
}
a:hover {
  color: var(--brand-accent);
  text-decoration: underline;
}

/* Eyebrow / label utility */
.eyebrow {
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Pull quote utility */
.pull-quote {
  font-family: var(--type-quote-family);
  font-size: var(--type-quote-size);
  font-weight: var(--type-quote-weight);
  font-style: italic;
  line-height: var(--type-quote-leading);
  color: var(--fg-primary);
}

/* ============================================================
   BUTTON SYSTEM
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-normal),
              color var(--transition-normal),
              box-shadow var(--transition-normal);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
}

.btn-primary {
  background-color: var(--brand-primary);
  color: var(--white);
}
.btn-primary:hover {
  background-color: var(--navy-700);
  color: var(--white);
  text-decoration: none;
}

.btn-gold {
  background-color: var(--gold-500);
  color: var(--white);
}
.btn-gold:hover {
  background-color: var(--gold-600);
  color: var(--white);
  text-decoration: none;
}

.btn-outline {
  background-color: transparent;
  color: var(--brand-primary);
  border: 1.5px solid var(--brand-primary);
}
.btn-outline:hover {
  background-color: var(--navy-50);
  text-decoration: none;
}

.btn-outline-gold {
  background-color: transparent;
  color: var(--gold-600);
  border: 1.5px solid var(--gold-500);
}
.btn-outline-gold:hover {
  background-color: var(--gold-50);
  text-decoration: none;
}

.btn-ghost {
  background-color: transparent;
  color: var(--brand-primary);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}
.btn-ghost:hover {
  color: var(--gold-600);
  text-decoration: none;
}

.btn-lg {
  font-size: var(--text-base);
  padding: var(--space-4) var(--space-8);
  letter-spacing: var(--tracking-wide);
}

.btn-sm {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-4);
}

/* ============================================================
   CARD SYSTEM
   ============================================================ */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-normal);
}
.card:hover {
  box-shadow: var(--shadow-md);
}
.card-body {
  padding: var(--space-6);
}

/* ============================================================
   FORM INPUTS
   ============================================================ */
.input {
  display: block;
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--fg-primary);
  background: var(--white);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--transition-fast);
  outline: none;
}
.input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(28,49,84,0.12);
}
.input::placeholder {
  color: var(--fg-muted);
}

label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-secondary);
  margin-bottom: var(--space-2);
}

/* ============================================================
   BADGE SYSTEM
   ============================================================ */
.badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  padding: 3px var(--space-3);
  border-radius: var(--radius-sm);
}
.badge-navy { background: var(--navy-100); color: var(--navy-700); }
.badge-gold { background: var(--gold-100); color: var(--gold-700); }
.badge-stone { background: var(--stone-200); color: var(--stone-700); }
.badge-outline { background: transparent; border: 1px solid var(--border-subtle); color: var(--fg-secondary); }

/* ============================================================
   DIVIDER
   ============================================================ */
.divider-gold {
  width: 48px;
  height: 2px;
  background: var(--gold-500);
  margin: var(--space-4) 0;
}
.divider-gold-center {
  margin: var(--space-4) auto;
}