/* ============================================================
   DAPY — Design tokens (evolved warm/tactile system)
   Grounded in the DAPY Design System; extends it with an
   editorial serif layer and warmer surfaces for the website.
   ============================================================ */

/* ---------- BRAND FONTS ---------- */
@font-face {
  font-family: "Square721 BdEx";
  src: url("../fonts/SquareBold.ttf") format("truetype");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Montserrat = working primary (brand-authorised Gotham fallback).
   Cormorant = editorial serif layer that brings the warm/luxury voice. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap");

:root {
  /* ---- FONT FAMILIES ---- */
  --font-display: "Montserrat", "Gotham", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Montserrat", "Gotham", "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-mark:    "Square721 BdEx", "Impact", "Arial Black", sans-serif;
  --font-utility: "Open Sans", "Montserrat", sans-serif;

  /* ---- TEAL (brand accent) ---- */
  --teal-50:  #E1FDF9;
  --teal-100: #EEF9F7;
  --teal-200: #E8F3F1;
  --teal-300: #A3D7B4;
  --teal-400: #29B9A1;
  --teal-500: #2ED9C3;   /* DAPY teal */
  --teal-600: #20B8A3;
  --teal-700: #077465;
  --teal-800: #015247;
  --brand-teal: var(--teal-500);
  --brand-teal-bright: #3CDBC0;

  /* ---- WARM NEUTRALS (tactile base) ---- */
  --ivory:     #FBF7F0;   /* page warm-up, a touch deeper for tactility */
  --bone:      #F4EEE3;
  --sand:      #E9E0D1;
  --sand-dark: #D8CCB7;
  --clay:      #B8A789;   /* warm mid for hairlines on dark */

  /* ---- TRUE / DEEP NEUTRALS ---- */
  --white:   #FFFFFF;
  --snow:    #FAFAFA;
  --smoke:   #F5F5F5;
  --whisper: #E9E9E9;
  --iron:    #CACBCD;
  --gray-200:#E0E0E0;
  --gray-300:#BDBDBD;
  --gray-500:#929598;
  --gray-700:#6B6258;   /* warm secondary text */
  --ink:     #211D1B;   /* warm soft-black */
  --espresso:#16110E;   /* deep warm near-black — dark stage */
  --black:   #000000;

  /* ---- SEMANTIC ---- */
  --error:#F44336; --warning:#ED6C02; --info:#2196F3; --success:var(--teal-600);

  /* ---- TEXT ROLES ---- */
  --fg-1: var(--ink);
  --fg-2: var(--gray-700);
  --fg-3: var(--gray-500);
  --fg-on-dark: #F2EBDD;
  --fg-on-teal: var(--ink);

  /* ---- SURFACES ---- */
  --bg-page:    var(--ivory);
  --bg-surface: var(--white);
  --bg-sunken:  var(--bone);
  --bg-dark:    var(--espresso);
  --bg-tint:    var(--teal-100);

  /* ---- LINES ---- */
  --line-1: rgba(33,29,27,.10);
  --line-2: rgba(33,29,27,.16);
  --line-strong: var(--ink);
  --line-on-dark: rgba(242,235,221,.16);

  /* ---- RADII (small, angular brand) ---- */
  --radius-xs:2px; --radius-sm:4px; --radius-md:7px;
  --radius-lg:10px; --radius-xl:12px; --radius-cut:0px;

  /* ---- SHADOWS (flat/ambient) ---- */
  --shadow-1: 0 1px 2px rgba(33,29,27,.05), 0 1px 1px rgba(33,29,27,.04);
  --shadow-2: 0 2px 10px rgba(33,29,27,.07), 0 1px 2px rgba(33,29,27,.05);
  --shadow-3: 0 18px 50px rgba(33,29,27,.12), 0 4px 12px rgba(33,29,27,.06);

  /* ---- SPACING (4pt) ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;
  --space-9:56px; --space-10:72px; --space-11:96px; --space-12:128px;

  /* ---- TYPE SCALE (fluid) ---- */
  --size-eyebrow: 12px;
  --size-body-sm: 13px;
  --size-body:    16px;
  --size-body-lg: clamp(18px, 1.2vw, 20px);
  --size-h6:      20px;
  --size-h5:      clamp(22px, 2vw, 26px);
  --size-h4:      clamp(28px, 3vw, 36px);
  --size-h3:      clamp(34px, 4vw, 48px);
  --size-h2:      clamp(40px, 6vw, 68px);
  --size-h1:      clamp(52px, 8.5vw, 104px);
  --size-display: clamp(72px, 13vw, 168px);

  --tracking-tight:-0.02em; --tracking-normal:0;
  --tracking-wide:0.04em; --tracking-uppercase:0.16em;
  --leading-tight:1.04; --leading-snug:1.18;
  --leading-body:1.6; --leading-loose:1.75;

  /* ---- MOTION ---- */
  --ease-standard: cubic-bezier(.2,.6,.2,1);
  --ease-emphasis: cubic-bezier(.2,.8,.2,1);
  --dur-1:160ms; --dur-2:280ms; --dur-3:560ms; --dur-4:900ms;

  --maxw: 1320px;
  --gutter: clamp(20px, 5vw, 88px);
}