/* ============================================================
   Waldkind — colors_and_type.css
   The complete token foundation for Waldkind ([ˈvaltkɪnt]).
   Inspired by Bauhaus restraint, additive manufacturing, and
   the muted palette of a German forest floor.
   ============================================================ */

/* ---- Webfonts -------------------------------------------------
   Primary (UI + body):     Inter Tight    — geometric, neutral,
                                             close to Futura/Geist
   Display:                 Archivo        — bauhaus-grotesque
                                             character for hero type
   Serif (IPA / accents):   Source Serif 4 — matches the [valtkɪnt]
                                             wordmark closely
   Mono (specs, tech):      JetBrains Mono — for 3D-print specs,
                                             file names, technical
                                             metadata
   Optional brand-supplied: Raleway        — variable, kept available
                                             via @font-face but not
                                             the default family
   --------------------------------------------------------------- */

@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Raleway-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=Archivo:wght@400;500;600;700;800&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ===========  COLOR — RAW PALETTE  =========== */

  /* Neutrals — paper, ink, forest floor */
  --paper:        #F5F2EC;  /* off-white, recycled paper feel */
  --paper-warm:   #EDE7DA;  /* warmer alt — packaging surfaces */
  --bone:         #E2DACA;  /* bone / unbleached linen */
  --ash:          #B8B2A4;  /* ash grey — secondary text */
  --slate:        #5C5A52;  /* dark warm grey — body text alt */
  --ink:          #1A1916;  /* near-black, not pure */
  --void:         #0A0A09;  /* deepest black */

  /* Forest — primary greens, the heart of the brand */
  --moss-50:      #EAEDE3;
  --moss-100:    #D4DBC6;
  --moss-300:    #97A37E;
  --moss-500:    #5C6B45;  /* signature deep moss */
  --moss-700:    #3E4A2F;
  --moss-900:    #1F2616;

  /* Earth — warm wood / clay / PLA filament */
  --clay-100:    #E8D9C5;
  --clay-300:    #C9A887;
  --clay-500:    #A07A55;  /* warm wood, supports moss */
  --clay-700:    #6E4F31;

  /* Bauhaus accents — used SPARINGLY, never together at full saturation */
  --bauhaus-red:    #C0392B;  /* dialled-back primary red */
  --bauhaus-yellow: #E8B923;  /* mustard, not lemon */
  --bauhaus-blue:   #2F4858;  /* deep teal-blue, not royal */

  /* Film / analog — for the film service product line */
  --film-amber:  #B47A3C;  /* warm developer fluid */
  --film-cyan:   #6B8B8E;  /* cool darkroom safelight inverse */


  /* ===========  COLOR — SEMANTIC TOKENS  =========== */

  /* Backgrounds */
  --bg:            var(--paper);
  --bg-alt:        var(--paper-warm);
  --bg-sunken:     var(--bone);
  --bg-inverse:    var(--ink);
  --bg-accent:     var(--moss-500);

  /* Foregrounds (text + iconography) */
  --fg-1:          var(--ink);       /* primary text */
  --fg-2:          var(--slate);     /* secondary text */
  --fg-3:          var(--ash);       /* tertiary, captions */
  --fg-inverse:    var(--paper);
  --fg-accent:     var(--moss-700);
  --fg-link:       var(--bauhaus-blue);

  /* Borders + dividers */
  --border-1:      #D8D2C2;          /* hairline on paper */
  --border-2:      #BFB8A6;          /* slightly stronger */
  --border-strong: var(--ink);       /* bauhaus-style heavy rule */

  /* Status — kept muted to fit palette */
  --success: #6B8E4E;
  --warning: var(--bauhaus-yellow);
  --error:   var(--bauhaus-red);
  --info:    var(--bauhaus-blue);

  /* ===========  TYPE — BASE FAMILIES  =========== */
  --font-sans:    'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Archivo', 'Inter Tight', sans-serif;
  --font-serif:   'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --font-alt:     'Raleway', 'Inter Tight', sans-serif;

  /* Weights */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;

  /* ===========  TYPE — SCALE  ===========
     Modular scale 1.250 (major third), grounded at 16px.
     Sizes are clamped lightly for fluidity but stay close to design width. */
  --t-xs:    12px;
  --t-sm:    14px;
  --t-base:  16px;
  --t-md:    18px;
  --t-lg:    20px;
  --t-xl:    24px;
  --t-2xl:   30px;
  --t-3xl:   38px;
  --t-4xl:   48px;
  --t-5xl:   64px;
  --t-6xl:   84px;
  --t-7xl:   112px;

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Tracking — tight on display, generous on micro caps */
  --tr-tight:    -0.02em;
  --tr-normal:    0em;
  --tr-wide:      0.04em;
  --tr-caps:      0.14em;

  /* ===========  SPACING  ===========
     4px base unit. Bauhaus likes the grid — use it. */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ===========  RADII  ===========
     Mostly square (Bauhaus). Small rounding for tactile elements only. */
  --r-0:    0;
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    8px;
  --r-pill: 999px;

  /* ===========  ELEVATION  ===========
     Very subtle. The brand prefers flatness with sharp borders
     over drop-shadowed cards. */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 rgba(26, 25, 22, 0.06);
  --shadow-2: 0 1px 2px rgba(26, 25, 22, 0.08), 0 1px 1px rgba(26, 25, 22, 0.04);
  --shadow-3: 0 6px 16px -4px rgba(26, 25, 22, 0.12);
  --shadow-press: inset 0 2px 0 0 rgba(26, 25, 22, 0.10);

  /* ===========  MOTION  =========== */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0.0, 1.0, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;

  /* ===========  LAYOUT  =========== */
  --maxw-text:    66ch;   /* prose */
  --maxw-content: 1180px; /* product pages */
  --rule-thin:    1px;
  --rule-thick:   2px;
  --rule-bauhaus: 4px;    /* the heavy bauhaus underline */
}


/* ============================================================
   SEMANTIC TYPE STYLES
   Use these as classes, or reference variables directly.
   ============================================================ */

.t-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-7xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size: var(--t-xs);
  line-height: 1;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.t-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.t-ipa {
  /* For [ˈvaltkɪnt]-style pronunciation marks. The brand voice. */
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-size: var(--t-2xl);
  letter-spacing: 0.01em;
  color: var(--fg-1);
}

.t-quote {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-style: italic;
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}