/* ============================================================
   Dentertain Design System — Colors & Type
   Wedding photography & videography. Bright, friendly, modern,
   minimalistic. Anchored by the deep "inkwell" navy of the
   aperture logo, softened by warm wedding neutrals.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Proxima Nova";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ProximaNova-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url("fonts/ProximaNova-LightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ProximaNova-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("fonts/ProximaNova-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ProximaNova-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  src: url("fonts/ProximaNova-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ProximaNova-Semibold.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url("fonts/ProximaNova-SemiboldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ProximaNova-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("fonts/ProximaNova-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/ProximaNova-Extrabold.ttf") format("truetype");
}
@font-face {
  font-family: "Proxima Nova";
  font-weight: 800;
  font-style: italic;
  font-display: swap;
  src: url("fonts/ProximaNova-ExtraboldItalic.ttf") format("truetype");
}

/* ---------- Tokens ---------- */
/*
   Palette pivot (v2): clean white background + warm mocha-taupe accent +
   warm espresso text, inspired by the two references the studio approved.
   The variable names are kept stable so prototypes and UI kits don't break:
     --ink-*       → warm espresso scale (was cool navy)
     --cream-50    → pure white (was off-white)
     --cream-100   → linen tint
     --champagne-* → mocha/taupe scale (was gold)
     --blush-*     → soft pink-rose (unchanged role, slightly tuned)
*/
:root {
  /* Brand — Espresso (warm dark for type & dark surfaces) */
  --ink-900: #1E1814;
  --ink-800: #2A211D;
  --ink-700: #3E322B;
  --ink-600: #5C4D44;
  --ink-500: #7B6C61;
  --ink-400: #A89A8C;
  --ink-300: #C9BFB3;

  /* Surface — clean white & linen */
  --cream-50:  #FFFFFF;   /* page background — pure white */
  --cream-100: #FAF6F2;   /* off-white surface tint, soft band */
  --stone-200: #ECE2D5;   /* hairline borders, dividers */
  --stone-300: #D8C7B5;   /* subdued band, hover swatch */

  /* Accent — Mocha (the warm taupe pulled from reference 1) — PRIMARY brand accent */
  --champagne-100: #EFE2D0;   /* mocha-100 */
  --champagne-300: #C5A88E;   /* mocha-300 */
  --champagne-500: #8C6F5E;   /* mocha-500 — primary brand accent */
  --champagne-700: #5C463A;   /* mocha-700 */

  /* Accent — Blush rose (soft romantic, second voice) */
  --blush-100: #FBE6DE;
  --blush-300: #F2C9B7;
  --blush-500: #E29A8A;
  --blush-700: #B67663;

  /* Coral (single vibrant moment — used sparingly, never as a section bg) */
  --coral-500: #EE5E7C;

  /* Soft sage for tertiary highlight (florals, "available" states) */
  --sage-300: #C7D0BB;
  --sage-500: #8FA083;

  /* Semantic */
  --color-success: #6B8E5F;
  --color-warning: #C5A88E;
  --color-error:   #C26A5C;
  --color-info:    #6E8AA8;

  /* Foreground / background semantic */
  --bg:        var(--cream-50);     /* pure white */
  --bg-alt:    var(--cream-100);    /* linen tint */
  --surface:   #FFFFFF;
  --surface-2: var(--cream-100);
  --surface-inverse: var(--ink-900);

  --fg:        var(--ink-900);   /* primary text — warm espresso */
  --fg-2:      var(--ink-600);   /* secondary text */
  --fg-3:      var(--ink-400);   /* tertiary text, captions */
  --fg-inverse:#FFFFFF;          /* on dark */

  --border:    var(--stone-200);
  --border-strong: var(--ink-700);

  --accent:       var(--champagne-500);   /* mocha is now the primary accent */
  --accent-soft:  var(--champagne-100);
  --accent-2:     var(--blush-500);       /* blush is the second-voice accent */
  --accent-2-soft:var(--blush-100);
  --gold:         var(--champagne-500);   /* alias, kept for back-compat */
  --gold-soft:    var(--champagne-100);

  /* Type families.
     Proxima Nova everywhere (selbst-gehostet via @font-face → fonts/).
     --font-serif ist ein optionaler editorial Serif (.ds-serif, aktuell ungenutzt);
     bewusst NUR System-Serifen, damit KEIN externer Font-Dienst (z. B. Google Fonts)
     geladen wird — Datenschutz: keine IP-Übertragung an Dritte. Soll später ein
     lizenzierter Serif genutzt werden, diesen selbst hosten (nicht per Google-Link). */
  --font-sans:    "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif:   "EB Garamond", Georgia, "Times New Roman", serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale */
  --fs-hero:   72px;   /* big editorial hero */
  --fs-h1:     56px;
  --fs-h2:     40px;
  --fs-h3:     28px;
  --fs-h4:     22px;
  --fs-lead:   20px;
  --fs-body:   16px;
  --fs-small:  14px;
  --fs-micro:  12px;
  --fs-eyebrow:11px;   /* uppercase label / kicker */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.55;
  --lh-loose:  1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.22em;   /* signature wide tracking, like the wordmark */
  --tracking-display: 0.04em;

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Spacing scale (4px base) */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   32px;
  --s-8:   40px;
  --s-9:   56px;
  --s-10:  72px;
  --s-11:  96px;
  --s-12:  128px;

  /* Radii — mostly small. The brand reads modern/minimal, not playful. */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Shadows — soft, photographic. Warm espresso tint, not cool navy. */
  --shadow-xs: 0 1px 2px rgba(30, 24, 20, 0.04);
  --shadow-sm: 0 2px 6px rgba(30, 24, 20, 0.06);
  --shadow-md: 0 8px 24px rgba(30, 24, 20, 0.08);
  --shadow-lg: 0 24px 60px rgba(30, 24, 20, 0.14);
  --shadow-image: 0 30px 80px -20px rgba(30, 24, 20, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
  --dur-cinematic: 900ms;  /* hero image fades, "shutter" reveals */
}

/* ---------- Semantic element styles ---------- */
.ds-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-hero,
.ds-h1, .ds-h2, .ds-h3, .ds-h4 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.ds-hero    { font-size: var(--fs-hero); font-weight: var(--fw-extrabold); line-height: var(--lh-tight);  letter-spacing: var(--tracking-tight); }
.ds-h1      { font-size: var(--fs-h1);   font-weight: var(--fw-extrabold); line-height: var(--lh-tight);  letter-spacing: var(--tracking-tight); }
.ds-h2      { font-size: var(--fs-h2);   font-weight: var(--fw-bold);      line-height: var(--lh-snug);   letter-spacing: var(--tracking-tight); }
.ds-h3      { font-size: var(--fs-h3);   font-weight: var(--fw-bold);      line-height: var(--lh-snug); }
.ds-h4      { font-size: var(--fs-h4);   font-weight: var(--fw-semibold);  line-height: var(--lh-snug); }

.ds-lead    { font-size: var(--fs-lead); font-weight: var(--fw-light);     line-height: var(--lh-normal); color: var(--fg-2); }
.ds-p       { font-size: var(--fs-body); font-weight: var(--fw-regular);   line-height: var(--lh-normal); color: var(--fg-2); margin: 0; }
.ds-small   { font-size: var(--fs-small); color: var(--fg-3); }
.ds-micro   { font-size: var(--fs-micro); color: var(--fg-3); }

/* Eyebrow / kicker — wide-tracked uppercase. The signature label style. */
.ds-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Editorial italic — used sparingly inside long-form copy and quotes */
.ds-quote {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--fg);
  text-wrap: balance;
}

/* Optional editorial serif headline (“Save the dates” voice). Use sparingly. */
.ds-serif {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 0.95;
}

/* Inline link */
.ds-link {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--blush-500);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.ds-link:hover { color: var(--blush-700); border-color: var(--blush-700); }

/* Mono / metadata (camera info, EXIF-style) */
.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--fg-3);
}