/* =========================================================
   family3000 — Design Tokens (Style-Bibel v1.0)
   Drop-in für JEDES family3000 App/Web-Projekt.
   Quelle der Wahrheit = OKLCH. Die #hex-Kommentare am Zeilenende
   sind nur Fallback für Kontexte ohne OKLCH (alte Browser, Office, PDF).
   Nutzung: diese Datei einbinden, dann ausschließlich var(--token).
   ========================================================= */
:root {
  /* ---- Schriften ---- */
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Markenfarbe: Clay / Terrakotta (Primär) ---- */
  --clay: oklch(0.64 0.13 45);          /* #CC7044 */
  --clay-soft: oklch(0.93 0.04 50);     /* #FFE1D1 */
  --clay-strong: oklch(0.55 0.13 43);   /* #AE542C */
  --primary: var(--clay);
  --primary-soft: var(--clay-soft);
  --primary-strong: var(--clay-strong);
  --on-clay: oklch(0.985 0.01 80);      /* helle Schrift auf Clay */
  --on-primary: var(--on-clay);

  /* ---- Paper & Surface (warme Neutraltöne) ---- */
  --paper: oklch(0.975 0.012 80);       /* #FBF6EE  Seiten-Hintergrund */
  --paper-sunk: oklch(0.955 0.016 78);  /* #F6EFE5  vertiefte Fläche */
  --surface: oklch(0.992 0.008 85);     /* #FFFCF6  Karten */
  --surface-2: oklch(0.965 0.014 78);   /* #F9F3E9 */
  --surface-card: var(--surface);
  --surface-hover: var(--surface-2);
  --bg: var(--paper);
  --bg-sunk: var(--paper-sunk);

  /* ---- Ink (Text, Cocoa statt Schwarz) ---- */
  --ink: oklch(0.28 0.022 55);          /* #32261F */
  --ink-2: oklch(0.44 0.020 55);        /* #5C5048 */
  --ink-3: oklch(0.60 0.016 58);        /* #887E77 */
  --text: var(--ink);
  --text-muted: var(--ink-2);
  --text-soft: var(--ink-3);

  /* ---- Linien / Rahmen ---- */
  --line: oklch(0.89 0.014 78);         /* #E0DAD1 */
  --line-strong: oklch(0.82 0.018 75);  /* #CBC3B8 */
  --border: var(--line);
  --border-strong: var(--line-strong);

  /* ---- Semantisch ---- */
  --good: oklch(0.62 0.11 150);         /* #519962 */
  --good-soft: oklch(0.95 0.03 150);
  --warn: oklch(0.72 0.13 75);          /* #D49838 */
  --warn-soft: oklch(0.95 0.04 80);
  --danger: oklch(0.58 0.16 28);        /* #C74C41 */
  --danger-soft: oklch(0.95 0.04 30);
  --focus: oklch(0.64 0.13 45 / 0.55);
  --ring: 0 0 0 3px var(--focus);

  /* ---- Familienfarben (Menschen farb-codieren) ----
     Gleiche Helligkeit & Sättigung, nur der Hue unterscheidet sich. */
  --tag-clay: oklch(0.64 0.13 45);      /* #CC7044 */
  --tag-clay-soft: oklch(0.94 0.035 50);
  --tag-honey: oklch(0.74 0.13 80);     /* #D5A13C */
  --tag-honey-soft: oklch(0.95 0.045 85);
  --tag-sage: oklch(0.66 0.10 150);     /* #63A471 */
  --tag-sage-soft: oklch(0.95 0.030 150);
  --tag-sky: oklch(0.66 0.10 235);      /* #4D9CC7 */
  --tag-sky-soft: oklch(0.95 0.028 235);
  --tag-berry: oklch(0.62 0.12 350);    /* #BB6690 */
  --tag-berry-soft: oklch(0.95 0.030 350);
  --tag-plum: oklch(0.58 0.11 305);     /* #8A68AE */
  --tag-plum-soft: oklch(0.95 0.028 305);

  /* ---- Typo-Skala ---- */
  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;
  --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem;
  --text-2xl: 2.25rem; --text-3xl: 3rem;    --text-4xl: 4.25rem;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65;
  --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0em;
  --tracking-wide: 0.02em; --tracking-mono: 0.06em;

  /* ---- Spacing (4px-Basisraster: 4·8·12·16·24·32·48·64) ---- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;

  /* ---- Radius ---- */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px;
  --radius-xl: 28px; --radius-2xl: 36px; --radius-pill: 999px;

  /* ---- Schatten (warm, cocoa-getönt — nie hart, nie grau) ---- */
  --shadow-sm: 0 1px 2px rgba(62,42,26,0.06), 0 1px 1px rgba(62,42,26,0.05);
  --shadow-md: 0 6px 16px -6px rgba(62,42,26,0.14), 0 2px 6px -2px rgba(62,42,26,0.08);
  --shadow-lg: 0 20px 44px -14px rgba(62,42,26,0.20), 0 6px 14px -8px rgba(62,42,26,0.10);
  --shadow-inset: inset 0 1px 2px rgba(62,42,26,0.07);

  /* ---- Bewegung (sanft) ---- */
  --dur-fast: 120ms; --dur-normal: 200ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0.36, 1);
}