/* =============================================================
   DIGIT ESTATE — Design Tokens
   Colors, typography, spacing, radii, shadow
   ============================================================= */

/* ---- Webfonts (Google Fonts substitutes — see README) -------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ===== COLOR — Brand ===== */
  --de-cream:        #F4EDE1;  /* travertine cream — primary surface */
  --de-cream-2:      #ECE3D2;  /* warm cream tone */
  --de-ivory:        #FBF7EF;  /* soft ivory — large surfaces */
  --de-sand:         #D9C9AC;  /* warm sand */
  --de-bronze:       #B08A5B;  /* brass primary accent */
  --de-bronze-deep:  #8B6B43;  /* darker bronze for press states */
  --de-gold:         #C9A77C;  /* gold highlight */
  --de-honey:        #E6B973;  /* warm honey glow */
  --de-walnut:       #3A2B1F;  /* deep walnut wood */
  --de-charcoal:     #1A1714;  /* near-black for dark sections */
  --de-ink:          #221E1A;  /* primary text */
  --de-graphite:     #2B2521;  /* secondary dark */

  /* ===== COLOR — Neutrals (warm scale) ===== */
  --de-n-50:  #FBF7EF;
  --de-n-100: #F4EDE1;
  --de-n-200: #E8DFCD;
  --de-n-300: #D2C5AE;
  --de-n-400: #A89A82;
  --de-n-500: #7E7263;
  --de-n-600: #5C5246;
  --de-n-700: #3F362C;
  --de-n-800: #261F18;
  --de-n-900: #14100C;

  /* ===== COLOR — Semantic foreground/background ===== */
  --fg-1: var(--de-ink);          /* primary text */
  --fg-2: var(--de-n-600);        /* secondary text */
  --fg-3: var(--de-n-500);        /* muted */
  --fg-4: var(--de-n-400);        /* very muted */
  --fg-inv: var(--de-cream);      /* on dark surfaces */
  --fg-inv-2: rgba(244, 237, 225, 0.65);

  --bg-1: var(--de-ivory);        /* primary surface */
  --bg-2: var(--de-cream);        /* card surface */
  --bg-3: var(--de-cream-2);      /* secondary surface */
  --bg-dark: var(--de-charcoal);  /* dark sections */
  --bg-walnut: var(--de-walnut);

  --accent:        var(--de-bronze);
  --accent-deep:   var(--de-bronze-deep);
  --accent-soft:   var(--de-gold);

  --border-1: rgba(34, 30, 26, 0.10);   /* subtle hairline */
  --border-2: rgba(34, 30, 26, 0.18);   /* visible hairline */
  --border-dark: rgba(244, 237, 225, 0.14);

  /* ===== COLOR — Status (used sparingly) ===== */
  --success: #6E8B4B;
  --warning: #C8924D;
  --danger:  #A65442;

  /* ===== TYPOGRAPHY — Families ===== */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:    'Manrope', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ===== TYPOGRAPHY — Weights ===== */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;

  /* ===== TYPOGRAPHY — Tracking ===== */
  --tr-tightest: -0.04em;
  --tr-tight:    -0.02em;
  --tr-normal:   0;
  --tr-wide:     0.08em;
  --tr-wider:    0.16em;       /* small caps eyebrows */
  --tr-widest:   0.32em;       /* "SCROLL TO EXPLORE" etc */

  /* ===== TYPOGRAPHY — Sizes ===== */
  --fs-eyebrow: 11px;
  --fs-meta:    12px;
  --fs-caption: 13px;
  --fs-body:    15px;
  --fs-lead:    18px;
  --fs-h6:      18px;
  --fs-h5:      22px;
  --fs-h4:      28px;
  --fs-h3:      38px;
  --fs-h2:      56px;
  --fs-h1:      84px;
  --fs-display: 132px;   /* the giant editorial display */

  /* ===== SPACING (4px grid) ===== */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-40: 160px;

  /* ===== RADII ===== */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   22px;
  --r-pill: 999px;

  /* ===== SHADOWS — soft + warm ===== */
  --shadow-1: 0 1px 2px rgba(34,30,26,0.04), 0 1px 1px rgba(34,30,26,0.03);
  --shadow-2: 0 4px 14px rgba(34,30,26,0.06), 0 2px 4px rgba(34,30,26,0.04);
  --shadow-3: 0 14px 40px rgba(34,30,26,0.10), 0 4px 12px rgba(34,30,26,0.06);
  --shadow-4: 0 30px 80px rgba(34,30,26,0.18), 0 8px 24px rgba(34,30,26,0.10);
  --shadow-glow: 0 0 60px rgba(230,185,115,0.25);  /* warm honey glow */

  /* ===== TIMING — calm, cinematic ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:  180ms;
  --t-base:  320ms;
  --t-slow:  680ms;
  --t-cine:  1200ms;

  /* ===== LAYOUT ===== */
  --container: 1320px;
  --gutter: 32px;
  --nav-h:  80px;
}

/* ============================================================
   BASE — element styles
   ============================================================ */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.55;
  letter-spacing: var(--tr-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--de-bronze); color: var(--de-cream); }

/* Display + heading — editorial serif */
.de-display, h1.de-h1, .de-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(64px, 9.5vw, var(--fs-display));
  line-height: 0.92;
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
h1, .de-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: var(--tr-tight);
}
h2, .de-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);
  line-height: 1.08;
  letter-spacing: var(--tr-tight);
}
h3, .de-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: 1.15;
  letter-spacing: var(--tr-tight);
}
h4, .de-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h5);
  line-height: 1.25;
  letter-spacing: var(--tr-normal);
}
h5, .de-h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h6);
  line-height: 1.3;
}

/* Eyebrow — small all-caps tracked */
.de-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--accent);
}

/* Body sizes */
p, .de-p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}
.de-lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-1);
  font-weight: var(--fw-light);
}
.de-meta {
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-medium);
}
.de-caption { font-size: var(--fs-caption); color: var(--fg-3); }

code, .de-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--fg-1);
}

/* Links — quiet underline that animates on hover */
a {
  color: inherit;
  text-decoration: none;
  position: relative;
}
.de-link {
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--t-fast) var(--ease-out);
}
.de-link:hover { opacity: 0.6; }

/* Italic in display — used for emphasis like uptown does with "Visions" */
.de-italic { font-style: italic; font-weight: var(--fw-light); }