/* ============================================================
   WEST COAST CRUISES — Foundations
   Colors + Type tokens. Import this in any artifact:
     <link rel="stylesheet" href="colors_and_type.css">
   Fonts load from Google Fonts (see note in README — these are
   matched substitutes; no brand font files were provided).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* DM Sans — brand UI/body face, self-hosted (variable: opsz + wght) */
@font-face {
  font-family: "DM Sans";
  src: url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- BRAND CORE (sampled from the logo) ---------------- */
  --wcc-gold:        #937017;  /* sunset gold — primary brand */
  --wcc-teal:        #1B8385;  /* sea teal — secondary brand  */

  /* ---- GOLD SCALE (warm sun) ----------------------------- */
  --gold-900: #4A380B;
  --gold-800: #6B5210;
  --gold-700: #937017;   /* = brand gold */
  --gold-600: #AD8624;
  --gold-500: #C29A38;
  --gold-400: #D4B564;
  --gold-300: #E4CE93;
  --gold-200: #EFE0BD;
  --gold-100: #F7EFDA;

  /* ---- TEAL SCALE (sea) ---------------------------------- */
  --teal-900: #0B2E2F;
  --teal-800: #0F4244;
  --teal-700: #14605F;
  --teal-600: #1B8385;   /* = brand teal */
  --teal-500: #2E9A99;
  --teal-400: #5BB1AF;
  --teal-300: #8FCBC9;
  --teal-200: #C0E2E0;
  --teal-100: #E6F3F2;

  /* ---- DUSK (deep ocean-at-sunset, for dark sections) ---- */
  --dusk-900: #0A1F26;
  --dusk-800: #0E2A33;   /* primary dark surface */
  --dusk-700: #143842;
  --dusk-600: #1E4954;

  /* ---- SAND / NEUTRALS (warm, paper-like) ---------------- */
  --sand-50:  #FBF8F1;   /* paper */
  --sand-100: #F6F1E6;
  --sand-200: #EDE5D4;
  --sand-300: #DED2BB;
  --ink-900:  #1A1813;   /* warm near-black */
  --ink-700:  #3D392F;
  --ink-500:  #6B655A;
  --ink-400:  #8C8678;
  --ink-300:  #B4AE9F;
  --white:    #FFFFFF;

  /* ---- SEMANTIC SURFACE / TEXT --------------------------- */
  --bg:        var(--sand-50);
  --bg-raised: var(--white);
  --bg-sunken: var(--sand-100);
  --bg-dark:   var(--dusk-800);

  --fg1: var(--ink-900);   /* primary text */
  --fg2: var(--ink-700);   /* secondary text */
  --fg3: var(--ink-500);   /* muted / captions */
  --fg-on-dark:   #F3EEE2;
  --fg-on-dark-2: #B9C6C5;

  --accent:        var(--wcc-gold);
  --accent-press:  var(--gold-800);
  --accent-2:      var(--wcc-teal);
  --accent-2-press:var(--teal-700);

  --border:        #E3DBCB;   /* hairline on sand */
  --border-strong: #D0C5AE;
  --border-on-dark:rgba(243,238,226,0.16);

  /* ---- STATUS ------------------------------------------- */
  --success: #3C7D52;
  --warning: #C2851F;
  --error:   #B23A2E;
  --info:    var(--teal-600);

  /* ---- TYPE FAMILIES ------------------------------------ */
  --font-serif:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:    "DM Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* logo-echo label: tight, heavy, all-caps sans */
  --font-label:   "DM Sans", system-ui, sans-serif;

  /* ---- TYPE SCALE (fluid-ish, px) ----------------------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   21px;
  --text-xl:   26px;
  --text-2xl:  33px;
  --text-3xl:  42px;
  --text-4xl:  54px;
  --text-5xl:  68px;
  --text-6xl:  88px;

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.6;

  /* ---- SPACING (8pt base, 4pt half-steps) --------------- */
  --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;
  --space-10:128px;

  /* ---- RADII -------------------------------------------- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  22px;
  --radius-pill:999px;

  /* ---- SHADOWS (warm-tinted, soft sea light) ------------ */
  --shadow-sm: 0 1px 2px rgba(26,24,19,0.06), 0 1px 3px rgba(26,24,19,0.05);
  --shadow-md: 0 4px 10px rgba(26,24,19,0.07), 0 2px 4px rgba(26,24,19,0.05);
  --shadow-lg: 0 14px 34px rgba(20,56,66,0.13), 0 5px 12px rgba(26,24,19,0.07);
  --shadow-xl: 0 28px 60px rgba(10,31,38,0.22), 0 10px 22px rgba(10,31,38,0.12);

  /* ---- MOTION ------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — use these class names or @extend.
   ============================================================ */

.wcc-eyebrow {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.wcc-h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--fg1);
}
.wcc-h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.005em;
  color: var(--fg1);
}
.wcc-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.wcc-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: var(--fg2);
}
.wcc-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg2);
}
.wcc-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--fg3);
}
.wcc-data {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  color: var(--fg1);
  font-variant-numeric: tabular-nums;
}