/* The Field — Colors & Type
   Source: Figma "The Field Identity Guidelines" (last updated Feb 12, 2026)
*/

/* ─── FONTS ────────────────────────────────────────────────── */
@font-face {
  font-family: "Exposure";
  src: url("./fonts/Exposure.woff2") format("woff2-variations"),
       url("./fonts/Exposure.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exposure";
  src: url("./fonts/Exposure-Italic.woff2") format("woff2-variations"),
       url("./fonts/Exposure-Italic.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: italic;
  font-display: swap;
}

/* GT America — Grilli Type, licensed. */
@font-face {
  font-family: "GT America";
  src: url("./fonts/GT-America-Standard-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT America";
  src: url("./fonts/GT-America-Standard-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT America";
  src: url("./fonts/GT-America-Standard-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT America Extended";
  src: url("./fonts/GT-America-Extended-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT America Extended";
  src: url("./fonts/GT-America-Extended-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT America Mono";
  src: url("./fonts/GT-America-Mono-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&display=swap");

:root {
  /* ─── NEUTRALS ─────────────────────────────── */
  --black:      #000000;
  --white:      #FFFFFF;
  --gray-1:     #F3F3F3;
  --gray-2:     #DDDDDD;
  --gray-3:     #666666;
  --gray-4:     #333333;

  /* ─── EXPRESSIVE AMBIENT COLORS ────────────── */
  /* Green — tokens only referenced; derived from metadata */
  --green-1:    #E9F8C5;
  --green-2:    #A9EF3C;

  /* Blue */
  --blue-1:     #D1EDF0;
  --blue-2:     #20DEED;
  --blue-3:     #0073DD;
  --blue-4:     #001269;

  /* Purple */
  --purple-1:   #E8E5FF;
  --purple-2:   #8480FF;
  --purple-3:   #615CD9;
  --purple-4:   #2E057A;

  /* Yellow */
  --yellow-1:   #FFF0CF;
  --yellow-2:   #FFDD00;
  --yellow-3:   #B55400;
  --yellow-4:   #401C00;

  /* Red */
  --red-1:      #FFE0D9;
  --red-2:      #FF4444;
  --red-3:      #CC0000;
  --red-4:      #520000;

  /* Pink */
  --pink-1:     #FFDEFC;
  --pink-2:     #FF66FF;
  --pink-3:     #C70073;
  --pink-4:     #4F002E;

  /* ─── SEMANTIC SURFACES ────────────────────── */
  --bg:         var(--white);
  --bg-dark:    var(--black);
  --bg-muted:   var(--gray-1);
  --bg-dim:     var(--gray-2);

  /* ─── SEMANTIC FOREGROUND ──────────────────── */
  --fg:         var(--black);
  --fg-muted:   var(--gray-4);
  --fg-subtle:  var(--gray-3);
  --fg-inverse: var(--white);

  /* ─── BORDER / LINE ────────────────────────── */
  --line:       rgba(0,0,0,0.11);
  --line-dark:  #333333;
  --line-muted: rgba(51,51,51,0.25);

  /* ─── TYPE FAMILIES ────────────────────────── */
  /* Exposure is variable: wght axis maps to brand "exposure" */
  --font-display:  "Exposure", "Crimson Text", "Times New Roman", serif;
  --font-ui:       "GT America", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font-ui-ext:   "GT America Extended", "GT America", system-ui, sans-serif;
  --font-mono:     "GT America Mono", ui-monospace, monospace;

  /* Exposure weights (numbered by exposure index, not traditional weight) */
  /* -10 = Regular (default), -50 = Bold. Variable range maps to CSS weight. */
  --exposure-regular: 400;  /* Exposure -10 */
  --exposure-bold:    700;  /* Exposure -50 */

  /* GT America weights */
  --ui-regular: 400;
  --ui-medium:  500;
  --ui-bold:    700;

  /* ─── TYPE SCALE (16:9 presentation / web) ─── */
  --fs-display-xl: 124px;   /* poster-scale Exposure */
  --fs-display-lg: 88px;    /* section titles */
  --fs-display-md: 55px;    /* hero */
  --fs-display-sm: 40px;    /* large card title */
  --fs-display-xs: 32px;    /* card title */
  --fs-h1: 44px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-body-lg: 20px;
  --fs-body: 18px;
  --fs-small: 16px;
  --fs-micro: 14px;
  --fs-label: 12px;

  --lh-tight: 1.0;
  --lh-snug: 1.1;
  --lh-display: 1.2;
  --lh-body: 1.5;

  /* ─── SPACING ──────────────────────────────── */
  --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;

  /* ─── RADII ────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;    /* default card */
  --radius-lg: 12px;   /* photo card */
  --radius-xl: 22px;   /* quote slab */
  --radius-pill: 999px;

  /* ─── GRADIENTS — Dark Backgrounds ──────────── */
  --grad-dark-green:  linear-gradient(#000 40%, #001269 60%, #0073E5 80%, #A9EF3C 100%);
  --grad-dark-pink:   linear-gradient(#000 40%, #2E057A 60%, #615CD9 80%, #FF66FF 100%);
  --grad-dark-red:    linear-gradient(#000 40%, #520000 60%, #B55500 80%, #FF4444 100%);
  --grad-dark-yellow: linear-gradient(#000 40%, #520000 60%, #B55500 80%, #FFDD00 100%);
  --grad-dark-blue:   linear-gradient(#000 40%, #2E057A 60%, #615CD9 80%, #20DEED 100%);

  /* ─── GRADIENTS — Light Backgrounds ─────────── */
  --grad-light-green: linear-gradient(#FFFFFF 40%, #20DEED 80%, #A9EF3C 100%);
  --grad-light-pink:  linear-gradient(#FFFFFF 40%, #8480FF 80%, #FF66FF 100%);
  --grad-light-red:   linear-gradient(#FFFFFF 40%, #FF66FF 80%, #FF4444 100%);
  --grad-light-yellow:linear-gradient(#FFFFFF 40%, #FFDD00 80%, #FF4444 100%);
  --grad-light-blue:  linear-gradient(#FFFFFF 40%, #20DEED 80%, #8480FF 100%);

  /* ─── GRADIENTS — Light Alt (gray-2 origin, matches contour fields) ─── */
  --grad-alt-green: linear-gradient(#DDDDDD 40%, #20DEED 80%, #A9EF3C 100%);
  --grad-alt-pink:  linear-gradient(#DDDDDD 40%, #8480FF 80%, #FF66FF 100%);

  /* ─── CONTOUR GRADIENTS (radial, for illustrations) ─── */
  --contour-blue-green:  radial-gradient(circle, #20DEED 0%, #A9EF3C 50%, #DDDDDD 100%);
  --contour-purple-pink: radial-gradient(circle, #8480FF 0%, #FF66FF 50%, #DDDDDD 100%);
  --contour-red-pink:    radial-gradient(circle, #FF4444 0%, #FF66FF 50%, #DDDDDD 100%);
  --contour-yellow-red:  radial-gradient(circle, #FFDD00 0%, #FF4444 50%, #DDDDDD 100%);
  --contour-purple-blue: radial-gradient(circle, #8480FF 0%, #20DEED 50%, #DDDDDD 100%);
}

/* ─── SEMANTIC TYPE CLASSES ─── */
html, body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
}

.display-xl, .display-lg, .display-md, .display-sm, .display-xs,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--exposure-regular);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-wrap: pretty;
}

.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-tight); }
.display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-tight); }
.display-md { font-size: var(--fs-display-md); line-height: var(--lh-display); }
.display-sm { font-size: var(--fs-display-sm); line-height: var(--lh-snug); }
.display-xs { font-size: var(--fs-display-xs); line-height: var(--lh-display); }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.eyebrow, .label {
  font-family: var(--font-ui);
  font-weight: var(--ui-bold);
  font-size: var(--fs-body);
  letter-spacing: 0;
  line-height: 1;
}
.micro {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  color: var(--fg-subtle);
}
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
}

/* "Blurred" logo effect helper for rendering the logo in raw text */
.logo-blur {
  font-family: var(--font-display);
  text-transform: lowercase;
  filter: blur(1.5px);
  letter-spacing: 0.02em;
}