/* =========================================================================
   DELTA FOUNDRY — Colors & Type Foundation
   -------------------------------------------------------------------------
   Single source of truth for brand tokens. Import this in any surface:
       <link rel="stylesheet" href="../colors_and_type.css">
   Fonts loaded from Google Fonts (see /fonts/README.md for substitution notes).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=Roboto+Mono:wght@400;500;600;700&display=swap');

:root {
  /* -----------------------------------------------------------------------
     COLOR — Core brand
     The wave-in-triangle mark lives in amber on black or amber on bone.
     Amber is the primary. Black is the grounding ink. Bone is the paper.
     --------------------------------------------------------------------- */
  --df-amber-900: #8A5A1A;   /* deep ember — pressed amber */
  --df-amber-700: #C88A2E;   /* roasted amber — hover / press */
  --df-amber-500: #F4B860;   /* PRIMARY — logo amber */
  --df-amber-300: #F8D19A;   /* tint — soft fills */
  --df-amber-100: #FBEAD1;   /* wash — subtle highlights */

  --df-ink-900:   #0B0B0B;   /* PRIMARY ink — the black in logo */
  --df-ink-800:   #1A1A1A;
  --df-ink-700:   #2A2724;
  --df-ink-500:   #5A534B;   /* mid-ink / body secondary */
  --df-ink-300:   #8E867C;   /* tertiary / captions */
  --df-ink-200:   #C4BDB2;   /* divider dark-on-bone */

  --df-bone-100:  #F5EFE3;   /* PRIMARY paper — warm bone */
  --df-bone-200:  #EDE5D4;   /* secondary paper */
  --df-bone-300:  #E3D9C3;   /* pressed paper / wells */
  --df-bone-50:   #FBF7EE;   /* lifted paper / cards on bone */

  /* Secondary / accent — pulled from pegs (Japanese print red + ocean) */
  --df-sun-500:   #C8372D;   /* vermillion / sun red — rare accent, 1× per view */
  --df-sun-700:   #8F2319;
  --df-ocean-500: #2E6B6B;   /* deep teal — woodblock sea */
  --df-ocean-300: #6AA39E;   /* aged copper patina */
  --df-moss-500:  #4B5A3A;   /* muted moss — editorial accent */

  /* -----------------------------------------------------------------------
     SEMANTIC COLOR TOKENS
     Use these in product UI. Swap values, not names.
     --------------------------------------------------------------------- */
  --fg-1:         var(--df-ink-900);   /* primary text */
  --fg-2:         var(--df-ink-700);   /* body text */
  --fg-3:         var(--df-ink-500);   /* secondary */
  --fg-4:         var(--df-ink-300);   /* captions / disabled */
  --fg-inverse:   var(--df-bone-100);  /* text on dark */
  --fg-brand:     var(--df-amber-700); /* brand text on light */
  --fg-brand-on-dark: var(--df-amber-500);

  --bg-1:         var(--df-bone-100);  /* page */
  --bg-2:         var(--df-bone-50);   /* raised surface */
  --bg-3:         var(--df-bone-200);  /* well / pressed */
  --bg-inverse:   var(--df-ink-900);   /* dark surface */
  --bg-brand:     var(--df-amber-500);

  --border-1:     var(--df-ink-200);   /* hairline default */
  --border-2:     var(--df-ink-900);   /* hard poster rule */
  --border-brand: var(--df-amber-500);

  --accent:       var(--df-sun-500);   /* use sparingly */
  --accent-cool:  var(--df-ocean-500);

  --success:      #3E7A4F;
  --warning:      var(--df-amber-700);
  --danger:       var(--df-sun-500);

  /* -----------------------------------------------------------------------
     TYPE FAMILIES
     Display — Bebas Neue: wide-tracked uppercase, mirrors the logo wordmark
     Editorial — DM Serif Display: high-contrast serif for feature headlines
     Body — Inter: neutral, clean workhorse for UI & prose
     Mono — JetBrains Mono: code, captions, data
     --------------------------------------------------------------------- */
  --font-display:   'Bebas Neue', 'Impact', 'Oswald', sans-serif;
  --font-editorial: 'DM Serif Display', 'Playfair Display', 'Times New Roman', serif;
  --font-body:      'Roboto Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
  --font-mono:      'Roboto Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* TYPE SCALE — restrained, editorial 1.333 on body, posterlike on display */
  --text-xs:    11px;   /* captions, metadata */
  --text-sm:    13px;   /* small body, labels */
  --text-base:  16px;   /* body default */
  --text-md:    18px;   /* lead paragraph */
  --text-lg:    22px;   /* subhead */
  --text-xl:    28px;   /* h3 */
  --text-2xl:   38px;   /* h2 */
  --text-3xl:   54px;   /* h1 editorial */
  --text-4xl:   80px;   /* display */
  --text-5xl:   128px;  /* hero display */

  /* LEADING */
  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-body:  1.55;
  --leading-loose: 1.75;

  /* TRACKING — critical. Delta Foundry uses wide tracking on uppercase. */
  --tracking-wide:    0.16em;   /* default on uppercase labels */
  --tracking-wider:   0.28em;   /* display / wordmark */
  --tracking-body:    0;
  --tracking-tight:   -0.02em;  /* large serif headlines only */

  /* -----------------------------------------------------------------------
     SPACING — 4px base
     --------------------------------------------------------------------- */
  --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;
  --space-10: 128px;

  /* -----------------------------------------------------------------------
     RADII — hand-drawn, soft but restrained.
     Logo uses rounded triangle; avoid sharp corners on cards.
     --------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------------------
     ELEVATION — subtle. Delta Foundry prefers hairline borders over shadows.
     Shadows used only when crossing a tonal threshold (e.g. card on photo).
     --------------------------------------------------------------------- */
  --shadow-1: 0 1px 0 rgba(11, 11, 11, 0.06);
  --shadow-2: 0 2px 8px rgba(11, 11, 11, 0.08);
  --shadow-3: 0 12px 32px -8px rgba(11, 11, 11, 0.18);
  --shadow-press: inset 0 1px 2px rgba(11, 11, 11, 0.12);

  /* Poster rule — the hard 1px/2px ink line used in editorial layouts */
  --rule-hair: 1px solid var(--df-ink-900);
  --rule-bold: 2px solid var(--df-ink-900);
  --rule-soft: 1px solid var(--df-ink-200);

  /* -----------------------------------------------------------------------
     MOTION
     Delta Foundry = deliberate, slow, analog. No bounce. No spring.
     --------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-entry:    cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
}

/* ---------------------------------------------------------------------------
   SEMANTIC TYPE STYLES
   Apply these classes (or mixin the declarations) in surface CSS.
   --------------------------------------------------------------------------- */

.df-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.df-display-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-5xl);
  letter-spacing: var(--tracking-wider);
  line-height: 0.95;
  text-transform: uppercase;
}

.df-h1 {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.df-h2 {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.df-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.df-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
}

.df-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
}

.df-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--fg-2);
}

.df-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-2);
}

.df-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--fg-3);
}

.df-caption {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-transform: uppercase;
}

.df-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--fg-2);
}

/* Editorial italic — DM Serif italic pairs well for pull-quotes */
.df-quote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}