/* ============================================================
   Perlas Atelier — Colors & Type
   ------------------------------------------------------------
   Import once at the top of any document:
     <link rel="stylesheet" href="../colors_and_type.css">
   Then use the semantic vars (--fg, --bg, --serif-display)
   rather than the raw palette tokens where possible.
   ============================================================ */

/* ---- Webfonts ---- */
@font-face {
  font-family: "Great Vibes";
  src: url("../fonts/GreatVibes-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quicksand";
  src: url("../fonts/Quicksand-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Dosis";
  src: url("../fonts/Dosis-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     PALETTE — raw brand tokens
     ============================================================ */
  --navy-900: #0f2c45;          /* deepest navy, for press states */
  --navy-700: #1a476f;          /* PRIMARY — wordmark + headings */
  --navy-500: #3d6a92;          /* hover / secondary navy */
  --navy-200: #aebecd;          /* soft navy tint, dividers */
  --navy-050: #e8edf2;          /* hairline navy on cream */

  --sand-700: #8a7866;          /* deep sand, body on cream */
  --sand-500: #b6a48f;          /* mid sand */
  --sand-300: #d2c2b3;          /* PRIMARY — warm beige */
  --sand-100: #e7dccf;          /* hover sand */

  --cream-050: #faf6f0;         /* lightest cream */
  --cream-100: #efe7dc;         /* PRIMARY — page background cream */
  --cream-200: #e3d8c8;         /* slightly deeper cream */

  --pearl-000: #ffffff;          /* pure pearl white */
  --pearl-050: #fdfbf7;          /* off-white, warmer than pure */

  --ink-900: #1a1a1a;           /* near-black text */
  --ink-700: #3a3a3a;           /* body */
  --ink-500: #6b6357;           /* muted body */
  --ink-300: #a89e91;           /* placeholder, captions */

  /* Pearl-lustre accents — overtones seen on a high-quality pearl.
     Used very sparingly: limited-edition trim, gift cues, status nuances.
     Each overtone has a soft fill + a deeper "ink" variant for text/icons. */
  --lustre-pearl:        #f5ede2;   /* peak highlight */
  --lustre-champagne:    #e6d3b3;   /* warm gold overtone */
  --lustre-champagne-ink:#8a6d3a;   /* deeper, for text on light surfaces */
  --lustre-blush:        #e8c4c0;   /* pink overtone */
  --lustre-blush-ink:    #a06868;
  --lustre-mauve:        #c9b8d4;   /* lavender undertone */
  --lustre-mauve-ink:    #6a5878;
  --lustre-slate:        #8ea4b8;   /* cool silvery-blue shadow */
  --lustre-slate-ink:    #3a4d62;
  --lustre-mint:         #bdd4cc;   /* green iridescence */
  --lustre-mint-ink:     #4a6b5e;

  /* Functional only — kept muted, almost never used in marketing surfaces */
  --terracotta-500: #b86a4a;     /* warning */
  --crimson-500: #9a3a3a;        /* errors, sold-out */

  /* ============================================================
     SEMANTIC COLOR TOKENS
     ============================================================ */
  --bg:           var(--cream-100);
  --bg-elevated: var(--pearl-050);
  --bg-inset:    var(--cream-200);
  --bg-contrast: var(--navy-700);    /* dark surface */

  --fg:    var(--navy-700);          /* primary text on cream */
  --fg-1:  var(--navy-700);          /* alias */
  --fg-2:  var(--ink-700);           /* body */
  --fg-3:  var(--ink-500);           /* muted */
  --fg-4:  var(--ink-300);           /* captions, placeholder */
  --fg-on-dark: var(--cream-100);    /* text on navy */

  --accent:       var(--navy-700);
  --accent-soft:  var(--sand-300);
  --accent-hover: var(--navy-500);
  --accent-press: var(--navy-900);

  --border:        rgba(26, 71, 111, 0.14);   /* hairlines, very soft */
  --border-strong: rgba(26, 71, 111, 0.28);
  --border-on-dark: rgba(239, 231, 220, 0.18);

  --focus-ring: rgba(26, 71, 111, 0.45);

  /* ============================================================
     TYPE — families
     ============================================================ */
  --serif-display: "Great Vibes", "Imperial Script", "Pinyon Script", cursive;
  --sans-heading:  "Dosis", system-ui, sans-serif;     /* wide-spaced uppercase, like ATELIER */
  --sans-body:     "Dosis", system-ui, sans-serif;     /* same family for body — single-sans system */
  --mono:          ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (modular ~1.25) */
  --fs-display: clamp(56px, 9vw, 128px);   /* logo-scale script lockups */
  --fs-h1: clamp(36px, 5vw, 56px);
  --fs-h2: clamp(28px, 3.6vw, 40px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;                       /* wide-tracked all caps */

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --lh-loose: 1.8;

  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-widest: 0.32em;       /* matches "A T E L I E R" spacing */

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --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 — soft, never sharp
     ============================================================ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ============================================================
     ELEVATION — pearl-soft shadows, never hard
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(26, 71, 111, 0.05), 0 1px 1px rgba(26, 71, 111, 0.03);
  --shadow-2: 0 6px 16px -8px rgba(26, 71, 111, 0.18), 0 2px 4px rgba(26, 71, 111, 0.04);
  --shadow-3: 0 18px 40px -20px rgba(26, 71, 111, 0.22), 0 4px 10px rgba(26, 71, 111, 0.05);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-pearl: 0 0 0 1px rgba(255,255,255,0.5) inset, 0 8px 24px -12px rgba(26,71,111,0.18);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);    /* default ease-out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-4: 600ms;
}

/* ============================================================
   BASE SEMANTIC ELEMENTS
   Use these names freely (h1, h2, .eyebrow, etc).
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--sans-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fg-1);
  font-family: var(--sans-heading);
  font-weight: 400;             /* Dosis/Quicksand both look refined at 400 */
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

h1 { font-size: var(--fs-h1); font-weight: 300; }
h2 { font-size: var(--fs-h2); font-weight: 300; }
h3 { font-size: var(--fs-h3); font-weight: 400; }
h4 { font-size: var(--fs-h4); font-weight: 500; }

p { margin: 0 0 var(--space-4) 0; }

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color var(--dur-2) var(--ease-soft), border-color var(--dur-2) var(--ease-soft);
}
a:hover { color: var(--accent-hover); border-color: var(--accent-hover); }

small, .caption { font-size: var(--fs-caption); color: var(--fg-3); }

/* Display script — for the brand wordmark, hero moments only */
.display-script {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0;
}

/* Wide-tracked uppercase — pairs with the script (like "ATELIER") */
.eyebrow {
  font-family: var(--sans-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--fg-1);
}

.subhead {
  font-family: var(--sans-heading);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: 400;
}

/* Code (rare in this brand, but defined) */
code, pre {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--cream-200);
  color: var(--ink-700);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}