/* ============================================================
   The Field's Edge — Colors & Type
   Source: The Field's Edge Brand Kit (approved palette + fonts)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "TAN Tangkiwood";
  src: url("fonts/TANTangkiwood-Display.otf") format("opentype"),
       url("fonts/TANTangkiwood-Display.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "League Gothic";
  src: url("fonts/LeagueGothic-Regular.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neutra Text";
  src: url("fonts/NeutraText-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* -------- Approved brand palette (Brand Kit, p.2) -------- */
  --tfe-black:       #000000;   /* primary ink */
  --tfe-slate:       #324446;   /* deep teal-slate — secondary dark */
  --tfe-sage:        #a8a78c;   /* warm taupe-sage — neutral accent */
  --tfe-olive:       #727e4e;   /* olive/field green — primary accent */
  --tfe-bone:        #e5e2d9;   /* warm bone — surface tint */
  --tfe-cream:       #fbf8ef;   /* warm cream — page background */

  /* -------- Semantic color roles -------- */
  --bg:              var(--tfe-cream);
  --bg-alt:          var(--tfe-bone);
  --bg-inverse:      var(--tfe-slate);

  --surface:         #ffffff;
  --surface-sunken:  var(--tfe-bone);
  --surface-inverse: var(--tfe-slate);

  --fg1:             var(--tfe-black);                /* primary text */
  --fg2:             var(--tfe-slate);                /* secondary text */
  --fg3:             #5a6466;                         /* tertiary — derived */
  --fg-muted:        var(--tfe-sage);                 /* labels, meta */
  --fg-on-dark:      var(--tfe-cream);
  --fg-inverse:      var(--tfe-cream);

  --accent:          var(--tfe-olive);                /* primary CTA */
  --accent-hover:    #5f6a41;                         /* darker olive */
  --accent-press:    #4e5836;
  --accent-soft:     #dfe2c9;                         /* olive @ tint */

  --accent-2:        var(--tfe-slate);                /* secondary accent */
  --accent-2-hover:  #243436;

  --border:          #d8d4c6;                         /* sage/bone derived */
  --border-strong:   var(--tfe-sage);
  --divider:         #ece8db;

  --link:            var(--tfe-olive);
  --link-hover:      var(--tfe-slate);

  /* Status (derived, harmonized to palette) */
  --success:         #6b8e3d;
  --warning:         #c9a227;
  --danger:          #a6442d;
  --info:            var(--tfe-slate);

  /* -------- Typography families -------- */
  --font-title:     "TAN Tangkiwood", "Cormorant Garamond", "Playfair Display", Georgia, serif;  /* Title */
  --font-subtitle: "Poppins", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;   /* Subtitle */
  --font-heading:  "League Gothic", "Oswald", "Bebas Neue", "Impact", sans-serif;                /* Heading */
  --font-subheading:"Neutra Text", "Poppins", "Jost", "Futura", sans-serif;                      /* Subheading */
  --font-body:     "Poppins", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;   /* Body text */
  --font-mono:     "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* -------- Type scale (desktop) -------- */
  --fs-hero:   clamp(48px, 6vw, 96px);
  --fs-h1:     clamp(36px, 4vw, 64px);
  --fs-h2:     clamp(28px, 3vw, 44px);
  --fs-h3:     22px;
  --fs-h4:     18px;
  --fs-body:   16px;
  --fs-small:  14px;
  --fs-caption:12px;

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

  --tracking-wide:  0.08em;
  --tracking-wider: 0.14em;
  --tracking-tight: -0.01em;

  /* -------- Spacing -------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* -------- Radii -------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;   /* default buttons, inputs */
  --r-lg: 10px;  /* cards */
  --r-xl: 18px;
  --r-full: 9999px;

  /* -------- Shadows (soft, earthy) -------- */
  --sh-sm: 0 1px 2px rgba(50, 68, 70, 0.08);
  --sh-md: 0 4px 12px rgba(50, 68, 70, 0.08), 0 1px 2px rgba(50, 68, 70, 0.06);
  --sh-lg: 0 16px 40px -12px rgba(50, 68, 70, 0.18), 0 4px 10px rgba(50, 68, 70, 0.08);
  --sh-inset: inset 0 1px 2px rgba(50, 68, 70, 0.06);

  /* -------- Motion -------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* -------- Container -------- */
  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1280px;
}

/* ============================================================
   ELEMENT DEFAULTS
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Title — TAN Tangkiwood, the tall ornate display face (hero only) */
.title, h1.title {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

/* Subtitle — Poppins */
.subtitle {
  font-family: var(--font-subtitle);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg2);
}

/* Heading — League Gothic, tall condensed caps */
h1, h2, .heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-stretch: 87.5%;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg1);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

/* Subheading — Neutra, geometric */
h3, h4, .subheading {
  font-family: var(--font-subheading);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
  color: var(--fg1);
}
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

/* Body — Poppins */
p, li, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg1);
}

/* Eyebrow / kicker — small caps label, used above headings */
.eyebrow {
  font-family: var(--font-subheading);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

a { color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--link-hover); }

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

code, pre { font-family: var(--font-mono); font-size: 0.92em; }