/*
 * tokens.css — Design-Tokens (Single Source of Truth)
 *
 * Hub-Layer der Drei-Schichten-Architektur:
 *   1. Tokens (diese Datei)
 *   2. Komponenten (assets/css/components/*)
 *   3. Komposition (homepage.css, manage.css, …)
 *
 * Wird vor allen anderen Stylesheets geladen. Diese Datei führt keine
 * visuellen Änderungen herbei — sie stellt nur Variablen bereit. Bestehende
 * Selektoren in public.css / manage.css nutzen sie noch nicht (Phase A).
 * Die Migration auf diese Tokens erfolgt schrittweise (Phase B+).
 *
 * Grundsätze:
 *  - Schriftfarben sind Vollfarben (Hex). Keine Opacity auf Text.
 *  - Surfaces sind solid. Kein Glasmorphism, kein backdrop-filter.
 *  - Borders/Linien dürfen Hex sein; Alpha nur, wo strukturell nötig.
 */

/* ============================================================
   1. BRAND LAYER — Marken-Konstanten, themenunabhängig
   ============================================================ */
:root {
  --brand-terra:        #C4784A;
  --brand-terra-soft:   #D48858;
  --brand-terra-deep:   #A86038;
  --brand-terra-deeper: #8F4E2A;

  --brand-cream:        #F7F3EC;
  --brand-cream-dark:   #EDE8DF;

  --brand-ink:          #1A1714;

  --brand-gold:         #C9A84C;
  --brand-teal:         #41A594;
  --brand-lock:         #B45454;

  --brand-white:        #FFFFFF;
}

/* ============================================================
   2. SEMANTIC LAYER — Light (Default)
   ============================================================ */
:root {
  /* Surfaces (solid) */
  --surface:            var(--brand-cream);
  --surface-sunken:     #EFEAE0;
  --surface-raised:     var(--brand-white);
  --surface-overlay:    #FBF9F4;
  --surface-ink:        var(--brand-ink);

  /* Schriften (Vollfarben, niemals rgba) */
  --ink:                var(--brand-ink);
  --ink-secondary:      #3D3630;
  --ink-muted:          #6B5E54;
  --ink-subtle:         #8A7F73;
  --ink-on-accent:      var(--brand-white);
  --ink-on-ink:         var(--brand-cream);

  /* Akzente */
  --accent:             var(--brand-terra);
  --accent-hover:       var(--brand-terra-soft);
  --accent-active:      var(--brand-terra-deep);
  --accent-deep:        var(--brand-terra-deeper);

  /* Linien & Borders */
  --line:               #E6DFD2;
  --line-strong:        #CFC5B2;

  /* Status */
  --status-lock:        var(--brand-lock);
  --status-success:     var(--brand-teal);
  --status-gold:        var(--brand-gold);

  /* Schatten */
  --shadow-sm:          0 1px 2px rgba(26, 23, 20, 0.06);
  --shadow-md:          0 1px 4px rgba(26, 23, 20, 0.08);
  --shadow-lg:          0 3px 12px rgba(26, 23, 20, 0.11);
  --shadow-xl:          0 8px 28px rgba(26, 23, 20, 0.14);
}

/* ============================================================
   3. SEMANTIC LAYER — Dark Override
   ============================================================ */
[data-theme="dark"] {
  --surface:            #1A1817;
  --surface-sunken:     #131110;
  --surface-raised:     #292724;
  --surface-overlay:    #332F2D;
  --surface-ink:        var(--brand-ink);

  --ink:                #EDE8E2;
  --ink-secondary:      #C3BDB4;
  --ink-muted:          #978F84;
  --ink-subtle:         #6E6760;
  --ink-on-accent:      var(--brand-white);
  --ink-on-ink:         var(--brand-cream);

  --line:               #2E2A27;
  --line-strong:        #423D38;

  --shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:          0 2px 8px rgba(0, 0, 0, 0.20);
  --shadow-lg:          0 4px 16px rgba(0, 0, 0, 0.28);
  --shadow-xl:          0 10px 32px rgba(0, 0, 0, 0.34);
}

/* ============================================================
   4. SCALES — theme-agnostisch
   ============================================================ */
:root {
  /* Spacing (8px-Basis) */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.375rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  /* Section-Padding (vertikal) */
  --section-y-tight: clamp(1.5rem, 3vw, 2.5rem);
  --section-y-cozy:  clamp(2.5rem, 5vw, 4rem);
  --section-y-airy:  clamp(4rem, 8vw, 7rem);

  /* Typografie-Skala */
  --text-display:  clamp(2.4rem, 4.5vw, 3.75rem);
  --text-hero:     clamp(2rem, 3.6vw, 3rem);
  --text-section:  clamp(1.9rem, 3vw, 2.75rem);
  --text-app-h1:   clamp(1.5rem, 4vw, 2.25rem);
  --text-app-h2:   clamp(1.35rem, 3vw, 1.75rem);
  --text-card:     1.125rem;
  --text-body:     1rem;
  --text-sm:       0.9rem;
  --text-xs:       0.78rem;
  --text-2xs:      0.7rem;

  /* Schriftgewicht / Tracking */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-wider:  0.06em;

  /* Radien */
  --radius-xs:   0.25rem;
  --radius-sm:   0.5rem;
  --radius-md:   0.875rem;
  --radius-lg:   1.25rem;
  --radius-xl:   1.75rem;
  --radius-pill: 999px;

  /* Motion */
  --motion-fast:    160ms;
  --motion-base:    260ms;
  --motion-slow:    380ms;
  --ease-standard:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-max:  1200px;
  --container-wide: 1360px;
}

/* ============================================================
   5. FONT FAMILIES
   ============================================================ */
:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}