/* ============================================================
   tokens.css — Design-Tokens fuer Lin Vala
   Feste Zwei-Schicht-Konvention:
     Schicht 1 = Primitive (rohe Werte, projektuebergreifend gleiches Namensschema)
     Schicht 2 = Semantische Rollen (referenzieren NUR Schicht 1)
   Komponenten-CSS referenziert ausschliesslich Schicht 2.
   ============================================================ */

:root {
  /* ========================================================
     SCHICHT 1 — PRIMITIVE
     ======================================================== */

  /* --- Farb-Primitive: --color-[name]-[stufe] --- */
  /* Sand / Creme (helle Flaechen) */
  --color-sand-50:  #FCFAF3;
  --color-sand-100: #F5F0E4;
  --color-sand-200: #EFE7D5;
  --color-sand-300: #E7DEC9;
  --color-sand-400: #D8CBB0;
  --color-sand-500: #CDBFA3;

  /* Forest (Markengruen, dunkel bis hell) */
  --color-forest-900: #182D20;
  --color-forest-800: #21402F;
  --color-forest-700: #2E6A45;
  --color-forest-600: #3E8A5B;
  --color-forest-300: #8FD3A6;
  --color-forest-200: #C7E0CF;
  --color-forest-100: #EAF3EA;

  /* Mist (gedaempftes Hellgruen fuer Text auf dunklem Grund) */
  --color-mist-100: #D8E4D6;
  --color-mist-200: #CFE0CF;
  --color-mist-300: #A9C2AC;
  --color-mist-400: #8FA593;

  /* Akzente */
  --color-terracotta-500: #BC6A43;
  --color-amber-500: #EE9A3A;
  --color-amber-ink: #241A0C;

  /* Neutrale Tinten (Text) */
  --color-ink-900: #24201A;
  --color-ink-700: #3A342A;
  --color-ink-500: #6B6153;
  --color-ink-400: #8A7F6C;

  --color-white: #FFFFFF;

  /* Fokus-Ring (eigenstaendiger, gut sichtbarer Wert) */
  --color-focus-500: #1F6FEB;

  /* --- Schrift-Primitive: --font-family-[rolle] --- */
  --font-family-display: 'Archivo', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-family-body: 'Libre Franklin', system-ui, -apple-system, Segoe UI, sans-serif;

  /* --- Abstands-Primitive: --space-[1..12] (4px-Raster) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 88px;
  --space-12: 96px;

  /* --- Radius-Primitive: --radius-[sm|md|lg|full] --- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* --- Schatten-Primitive: --shadow-[sm|md|lg] --- */
  --shadow-sm: 0 1px 3px rgba(24, 45, 32, 0.08);
  --shadow-md: 0 12px 28px rgba(46, 106, 69, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-bar: 0 -6px 20px rgba(24, 45, 32, 0.14);

  /* --- Dauer-Primitive: --duration-[fast|base|slow] --- */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 1300ms;
  --duration-reveal: 620ms;
  --duration-slide: 4500ms;   /* Standzeit eines Hero-Bildes */
  --duration-kenburns: 9000ms;

  /* --- Beschleunigungs-Primitive: --ease-[name] --- */
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.45, 0.05, 0.3, 1);


  /* ========================================================
     SCHICHT 2 — SEMANTISCHE ROLLEN (referenzieren nur Schicht 1)
     ======================================================== */

  /* Marke */
  --color-brand-primary: var(--color-forest-700);
  --color-brand-accent: var(--color-amber-500);

  /* Flaechen */
  --color-surface: var(--color-sand-50);          /* Karten */
  --color-surface-alt: var(--color-sand-200);      /* abgesetzte Sektionen */
  --color-surface-page: var(--color-sand-100);     /* Seitenhintergrund */
  --color-surface-inverse: var(--color-forest-800);/* dunkle Sektionen (Hero, Team) */
  --color-surface-footer: var(--color-forest-900);
  --color-surface-strip: var(--color-forest-700);  /* Trust-Strip */

  /* Text */
  --color-text: var(--color-ink-900);
  --color-text-muted: var(--color-ink-500);
  --color-text-subtle: var(--color-ink-400);
  --color-text-on-dark: var(--color-mist-100);
  --color-text-on-dark-muted: var(--color-mist-300);

  /* Linien */
  --color-border: var(--color-sand-300);
  --color-border-strong: var(--color-sand-400);

  /* Interaktion */
  --color-link: var(--color-forest-700);
  --color-link-hover: var(--color-terracotta-500);
  --color-cta: var(--color-amber-500);
  --color-cta-text: var(--color-amber-ink);
  --color-action: var(--color-forest-600);         /* Buttons/Submit */
  --color-action-text: var(--color-white);
  --color-focus-ring: var(--color-focus-500);

  /* Schrift-Rollen */
  --font-display: var(--font-family-display);
  --font-body: var(--font-family-body);

  /* Abstands-Rollen */
  --space-section-y: var(--space-12);
  --space-component-gap: var(--space-4);
  --space-content-x: var(--space-7);               /* horizontaler Seitenrand */

  /* Radius-Rollen */
  --radius-interactive: var(--radius-full);         /* Pill-Buttons (Signatur) */
  --radius-input: var(--radius-sm);
  --radius-card: var(--radius-lg);
  --radius-badge: var(--radius-md);

  /* Layout */
  --layout-max-width: 1240px;
}