/* ============================================================
   BioTwine Manufacturing — CSS Custom Properties
   Palette: Deep forest greens, warm kraft browns, cream whites
   Inspired by FSC-certified sustainable agriculture
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

:root {

  /* ── Brand Colors ─────────────────────────────────────── */
  --color-forest:         #2D4A2D;   /* deep forest green — primary */
  --color-forest-dark:    #1C2E1C;   /* darkest green — headers, footer */
  --color-forest-mid:     #3D6B3D;   /* mid green — hover states */
  --color-forest-light:   #4E8B4E;   /* lighter green — accents */
  --color-meadow:         #7CB87C;   /* soft meadow green — secondary accent */

  --color-kraft:          #8B6914;   /* warm kraft brown — primary accent */
  --color-kraft-light:    #C49A2A;   /* golden kraft — highlights */
  --color-kraft-pale:     #F5E9C8;   /* pale kraft cream — backgrounds */

  --color-cream:          #FAF6EE;   /* warm off-white — page bg */
  --color-cream-dark:     #F0E8D5;   /* slightly darker cream — card bg */
  --color-linen:          #E8DCC8;   /* linen — borders, dividers */

  --color-bark:           #5C3D11;   /* dark bark brown — text */
  --color-soil:           #3A2508;   /* deep soil — headings */

  /* ── Text ─────────────────────────────────────────────── */
  --text-heading:         #1C2E1C;
  --text-body:            #3A3A2E;
  --text-muted:           #7A7A6A;
  --text-light:           #A8A898;
  --text-inverse:         #F5F0E8;
  --text-inverse-muted:   #B8C8B8;

  /* ── Backgrounds ──────────────────────────────────────── */
  --bg-body:              #FAF6EE;
  --bg-card:              #FFFFFF;
  --bg-card-alt:          #F5EFE2;
  --bg-section-dark:      #2D4A2D;
  --bg-section-mid:       #3D6B3D;
  --bg-nav:               #1C2E1C;
  --bg-footer:            #1C2E1C;
  --bg-accent-strip:      #8B6914;

  /* ── UI Elements ──────────────────────────────────────── */
  --border-color:         #D8CCBA;
  --border-color-dark:    #B8A88A;
  --border-radius:        4px;
  --border-radius-lg:     8px;
  --border-radius-pill:   50px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:            0 1px 4px rgba(44, 74, 44, 0.08);
  --shadow-md:            0 4px 16px rgba(44, 74, 44, 0.12);
  --shadow-lg:            0 12px 40px rgba(44, 74, 44, 0.18);
  --shadow-card:          0 2px 8px rgba(44, 74, 44, 0.10);

  /* ── Typography ───────────────────────────────────────── */
  --font-display:         'Playfair Display', Georgia, serif;
  --font-body:            'DM Sans', system-ui, sans-serif;
  --font-mono:            'DM Mono', monospace;

  --font-size-xs:         0.75rem;
  --font-size-sm:         0.875rem;
  --font-size-base:       1rem;
  --font-size-lg:         1.125rem;
  --font-size-xl:         1.25rem;
  --font-size-2xl:        1.5rem;
  --font-size-3xl:        1.875rem;
  --font-size-4xl:        2.25rem;
  --font-size-5xl:        3rem;
  --font-size-6xl:        3.75rem;

  --line-height-tight:    1.2;
  --line-height-snug:     1.35;
  --line-height-base:     1.65;
  --line-height-loose:    1.8;

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  /* ── Layout ───────────────────────────────────────────── */
  --sidebar-width:        260px;
  --topbar-height:        70px;
  --admin-topbar-height:  64px;
  --content-max-width:    1280px;
  --content-padding:      1.5rem;

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:      150ms ease;
  --transition-base:      250ms ease;
  --transition-slow:      400ms ease;

  /* ── Public Nav height ───────────────────────────────── */
  --nav-height:           100px;
}