/* ============================================================
   VERSCHENKPFLANZEN DESIGN SYSTEM
   Foundation Layer: Tokens, Reset, Typography, Primitives
   Last revision: 2026-05-11
   ============================================================ */

@layer reset, tokens, base, components, utilities, legacy;

/* ===== TOKENS ===== */
@layer tokens {
  :root {
    /* --- COLORS: PRIMITIVE PALETTE --- */
    /* Greens (Brand) */
    --green-50:  #f3f8ee;
    --green-100: #e2eed4;
    --green-200: #c8dca8;
    --green-300: #a4c476;
    --green-400: #82a94f;
    --green-500: #5d8a36;
    --green-600: #4a7c3e;
    --green-700: #3a6231;
    --green-800: #2c4a26;
    --green-900: #1d301a;

    /* Earth (Brown/Cocoa) */
    --earth-50:  #faf6f1;
    --earth-100: #f0e6d6;
    --earth-200: #e0cdb0;
    --earth-300: #c9a87f;
    --earth-400: #a87f4f;
    --earth-500: #855a32;
    --earth-600: #5a3a1f;
    --earth-700: #3d2810;
    --earth-800: #2a1a08;
    --earth-900: #1a0f04;

    /* Accent (Warm Coral - sparingly used for CTAs/Warnings) */
    --coral-50:  #fff3ed;
    --coral-100: #ffd9c2;
    --coral-200: #ffb38a;
    --coral-300: #ff8a4a;
    --coral-400: #e96b2a;
    --coral-500: #c4521a;
    --coral-600: #963c10;

    /* Neutrals (Warm Grey) */
    --neutral-0:   #ffffff;
    --neutral-25:  #fcfaf7;
    --neutral-50:  #f7f4ee;
    --neutral-100: #ebe6dd;
    --neutral-200: #d8d1c4;
    --neutral-300: #b8aea0;
    --neutral-400: #908576;
    --neutral-500: #6b6253;
    --neutral-600: #4d4538;
    --neutral-700: #342f25;
    --neutral-800: #1f1c15;
    --neutral-900: #0d0b07;

    /* Semantic */
    --success-bg:   #e8f3df;
    --success-fg:   #2a5a1c;
    --success-border:#a4c476;
    --warning-bg:   #fdf2d4;
    --warning-fg:   #6b4c0a;
    --warning-border:#e8c659;
    --danger-bg:    #fde0d6;
    --danger-fg:    #8a2a14;
    --danger-border:#e98572;
    --info-bg:      #dde9f1;
    --info-fg:      #1f4970;
    --info-border:  #6fa3cb;

    /* --- SEMANTIC COLORS --- */
    --bg-page:        var(--neutral-25);
    --bg-surface:     var(--neutral-0);
    --bg-elevated:    var(--neutral-0);
    --bg-muted:       var(--neutral-50);
    --bg-inverted:    var(--earth-700);

    --text-strong:    var(--earth-700);
    --text-default:   var(--neutral-700);
    --text-muted:     var(--neutral-500);
    --text-subtle:    var(--neutral-400);
    --text-inverted:  var(--neutral-0);
    --text-link:      var(--green-600);
    --text-link-hover:var(--green-700);

    --border-subtle:  var(--neutral-100);
    --border-default: var(--neutral-200);
    --border-strong:  var(--neutral-300);
    --border-focus:   var(--green-500);

    --brand-primary:  var(--green-600);
    --brand-primary-hover: var(--green-700);
    --brand-primary-fg:    var(--neutral-0);
    --brand-secondary:    var(--earth-700);

    /* --- SPACING SCALE (8pt-grid) --- */
    --sp-0:  0;
    --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;

    /* --- TYPOGRAPHY --- */
    --ff-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ff-display: 'Fraunces', 'Lora', Georgia, serif;
    --ff-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

    /* Modular Type Scale (1.25 ratio, base 16px) */
    --fs-xs:   12px;
    --fs-sm:   14px;
    --fs-base: 16px;
    --fs-md:   18px;
    --fs-lg:   20px;
    --fs-xl:   24px;
    --fs-2xl:  30px;
    --fs-3xl:  38px;
    --fs-4xl:  48px;
    --fs-5xl:  60px;
    --fs-6xl:  76px;

    --lh-tight:   1.15;
    --lh-snug:    1.3;
    --lh-normal:  1.5;
    --lh-relaxed: 1.65;
    --lh-loose:   1.85;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;

    /* --- RADII --- */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* --- SHADOWS --- */
    --shadow-xs:  0 1px 2px rgba(45, 32, 18, 0.05);
    --shadow-sm:  0 2px 4px rgba(45, 32, 18, 0.06), 0 1px 2px rgba(45, 32, 18, 0.04);
    --shadow-md:  0 4px 8px rgba(45, 32, 18, 0.08), 0 2px 4px rgba(45, 32, 18, 0.05);
    --shadow-lg:  0 12px 24px rgba(45, 32, 18, 0.10), 0 4px 8px rgba(45, 32, 18, 0.06);
    --shadow-xl:  0 24px 48px rgba(45, 32, 18, 0.14), 0 8px 16px rgba(45, 32, 18, 0.08);
    --shadow-focus: 0 0 0 3px rgba(93, 138, 54, 0.35);

    /* --- TRANSITIONS --- */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --dur-fast:    120ms;
    --dur-base:    200ms;
    --dur-slow:    320ms;

    /* --- LAYOUT --- */
    --container-narrow: 720px;
    --container-base:   1040px;
    --container-wide:   1280px;
    --container-full:   100%;
    --container-pad:    var(--sp-5);

    /* --- Z-INDEX --- */
    --z-base:    1;
    --z-sticky:  100;
    --z-overlay: 500;
    --z-modal:   1000;
    --z-toast:   2000;
  }
}

/* ===== RESET ===== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  table { border-collapse: collapse; border-spacing: 0; }
  h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }
  :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
}

/* ===== BASE TYPOGRAPHY ===== */
@layer base {
  html { font-size: 16px; }
  body {
    font-family: var(--ff-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--text-default);
    background: var(--bg-page);
  }

  /* Display headings (Fraunces serif) */
  .ds-display-1, .ds-display-2, .ds-display-3,
  .ds-h1, .ds-h2 {
    font-family: var(--ff-display);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
  }

  .ds-display-1 { font-size: clamp(2.5rem, 5vw + 1rem, 4.75rem); line-height: 1.05; }
  .ds-display-2 { font-size: clamp(2rem, 4vw + 0.5rem, 3.75rem); line-height: 1.08; }
  .ds-display-3 { font-size: clamp(1.75rem, 3vw + 0.25rem, 3rem); line-height: 1.12; }
  .ds-h1 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); }
  .ds-h2 { font-size: clamp(1.5rem, 2vw + 0.75rem, 2.125rem); }

  /* Functional headings (Inter) */
  .ds-h3, .ds-h4 {
    font-family: var(--ff-sans);
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
  }
  .ds-h3 { font-size: var(--fs-xl); }
  .ds-h4 { font-size: var(--fs-lg); }

  .ds-eyebrow {
    font-family: var(--ff-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--brand-primary);
    margin-bottom: var(--sp-3);
  }

  .ds-lead {
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    color: var(--text-muted);
    max-width: 60ch;
  }

  .ds-text-sm  { font-size: var(--fs-sm); }
  .ds-text-md  { font-size: var(--fs-md); }
  .ds-text-muted { color: var(--text-muted); }
  .ds-text-subtle { color: var(--text-subtle); }
}