/* ============================================================
 * Closet Capital · Design Tokens
 * v1.1 · Mauve & Peach · April 2026
 *
 * Verwende ausschließlich diese Tokens. Keine Inline-Hex-Werte.
 * ============================================================ */

:root {

  /* ----- Paper / Backgrounds ---------------------------------- */
  /* v1.2 — Apr 2026: heller, weniger Beige-Stich */
  --cc-cream:        #F4EFE3;   /* page bg — leicht entsättigt */
  --cc-paper:        #FCFAF4;   /* surfaces — fast-weiß, warm */
  --cc-cream-deep:   #ECE4D2;   /* etwas dunkler für mehr Range */

  /* ----- Ink / Text ------------------------------------------- */
  --cc-ink:          #1A1410;
  --cc-ink-deep:     #2A1820;   /* near-mauve ink for body */
  --cc-ink-soft:     #6B4A5C;   /* desaturated mauve for meta/labels */

  /* Legacy aliases — do not use in new code */
  --cc-brown:        var(--cc-ink-deep);
  --cc-brown-mid:    var(--cc-ink-soft);

  /* ----- Primary · Mauve -------------------------------------- */
  --cc-mauve-deep:   #3A2030;  /* logo, headlines, primary surfaces */
  --cc-mauve:        #5A3248;  /* hover, borders on dark */

  /* ----- Accent · Peach --------------------------------------- */
  --cc-peach:        #E89B72;  /* accent · app-icon ground */
  --cc-peach-soft:   #F7D7C1;  /* tints, reversed logo on dark */

  /* ----- Hairlines -------------------------------------------- */
  --cc-hairline:          rgba(58,32,48,0.14);
  --cc-hairline-strong:   rgba(58,32,48,0.28);

  /* ----- Typografie ------------------------------------------- */
  --cc-font-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --cc-font-sans:    'Inter', system-ui, sans-serif;
  --cc-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Font-Sizes — v1.2: +~15% scale */
  --cc-text-xs:   12px;
  --cc-text-sm:   14px;
  --cc-text-base: 16px;
  --cc-text-lg:   19px;
  --cc-text-h2:   25px;
  --cc-text-h1:   32px;
  --cc-text-display: 48px;
  --cc-text-hero:    82px;

  /* Line-Heights */
  --cc-leading-tight: 1.1;
  --cc-leading-snug:  1.35;
  --cc-leading-body:  1.55;
  --cc-leading-loose: 1.7;

  /* Letter-Spacing */
  --cc-tracking-tight:  -0.02em;
  --cc-tracking-normal: 0;
  --cc-tracking-wide:   0.10em;   /* wordmark */
  --cc-tracking-meta:   0.18em;   /* meta / eyebrow */

  /* ----- Spacing (Basis 4px) ---------------------------------- */
  --cc-space-1:   4px;
  --cc-space-2:   8px;
  --cc-space-3:   12px;
  --cc-space-4:   16px;
  --cc-space-5:   20px;
  --cc-space-6:   24px;
  --cc-space-8:   32px;
  --cc-space-11:  44px;
  --cc-space-16:  64px;
  --cc-space-24:  96px;
  --cc-space-32:  128px;

  /* ----- Radius ----------------------------------------------- */
  --cc-radius-sm:  4px;
  --cc-radius:     8px;
  --cc-radius-lg:  16px;

  /* ----- Motion ----------------------------------------------- */
  --cc-ease:         cubic-bezier(0.2, 0, 0.2, 1);
  --cc-ease-out:     cubic-bezier(0.2, 0, 0, 1);
  --cc-dur-micro:    120ms;
  --cc-dur-default:  220ms;
  --cc-dur-slow:     420ms;

  /* ----- Shadows (sparsam verwenden) -------------------------- */
  --cc-shadow-app-icon: 0 8px 24px -8px rgba(232,155,114,0.55);

  /* ----- Breakpoints (als Dokumentation) ---------------------- */
  /* mobile:   < 640px  */
  /* tablet:   640–1024 */
  /* desktop:  ≥ 1024   */
}

/* ============================================================
 * Globale Defaults
 * ============================================================ */

html, body {
  background: var(--cc-cream);
  color: var(--cc-ink);
  font-family: var(--cc-font-sans);
  font-size: var(--cc-text-base);
  line-height: var(--cc-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--cc-font-display);
  font-weight: 600;
  color: var(--cc-mauve-deep);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-tight);
}

a {
  color: var(--cc-mauve-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--cc-mauve); }

/* ============================================================
 * Reduced Motion
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}