/* Design Tokens — Namensanalyse.de
   Profil 999: Schwarz mit Rot. Diffuses Weiß. Karmesin, Rotviolett, Orange mit Metallglanz.
   Klare Linien mit schlanker Silhouette. */

:root {
  /* === Basis === */
  --black: #0A0A0A;
  --black-deep: #050505;
  --white-diffuse: #F4F1EE;
  --white-pure: #FFFFFF;

  /* === Rot-Familie === */
  --red: #E10600;           /* Primär — kompromisslos */
  --crimson: #B5002A;       /* Karmesin */
  --rose: #D98695;          /* Rosenfarben */
  --red-violet: #6E1846;    /* Rotviolett */
  --red-brown: #5B1A0E;     /* Rotbraun */

  /* === Orange Metallic === */
  --orange-1: #FF8A1F;
  --orange-2: #FF6A00;
  --orange-3: #C44400;
  --orange-metal: linear-gradient(135deg, var(--orange-1) 0%, var(--orange-2) 45%, var(--orange-3) 100%);
  --orange-metal-shine: linear-gradient(135deg,
    #FFB066 0%,
    #FF8A1F 25%,
    #FF6A00 50%,
    #C44400 75%,
    #7A2A00 100%);

  /* === Weitere Farbpaletten der Profile (für Result-Cards) === */
  --p-yellow: #F4C430;        /* Sonnengelb (1xx) */
  --p-gold: #C9A227;
  --p-cream: #F5F0E1;         /* Cremeweiß (2xx) */
  --p-water-blue: #7FB3D5;
  --p-silver: #C0C0C0;
  --p-cardinal: #C41E3A;      /* Kardinalrot (3xx) */
  --p-purple: #6B2C5C;
  --p-deep-blue: #1F2A57;
  --p-forest: #2E5339;        /* Sachorientiert dunkel (4xx) */
  --p-clay: #B66B3A;          /* Erdtöne (5xx) */
  --p-rose-quartz: #E4B7A0;   /* (6xx) */
  --p-violet: #5D3A8E;        /* (7xx) */
  --p-charcoal: #2F2F2F;      /* (8xx) — schwere Werte */
  --p-bordeaux: #5C0A1F;
  /* 9xx nutzt --black, --red, --crimson, --rose, --red-violet, --red-brown, --orange-metal, --white-diffuse */

  /* === Typografie === */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --fs-hero: clamp(2.5rem, 7vw, 5.5rem);
  --fs-h1: clamp(2rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 3.5vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 2.5vw, 1.5rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  --lh-tight: 1.1;       /* war 1.05 — Headlines atmen einen Hauch mehr */
  --lh-snug: 1.3;
  --lh-base: 1.6;
  --lh-relaxed: 1.75;    /* war 1.7 — Body-Text wird lesbarer und ruhiger */

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-display: -0.025em;  /* war -0.035em — Headlines weniger gequetscht, menschlicher */

  /* === Spacing === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 12rem;

  /* === Borders & Radii === */
  --line-thin: 1px;
  --line: 2px;
  --line-thick: 4px;

  --radius-none: 0;
  --radius-sm: 4px;
  --radius: 10px;       /* runder = wärmer; war 4px (zu rasiermesserscharf für ein psychologisches Thema) */
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Sanfte Tiefe statt scharfer Borders — verstärkt das „weichere" Gefühl */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-soft-dark: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);

  /* === Motion === */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 600ms;
  --dur-anim: 7000ms; /* die kanonischen 7 Sekunden */

  /* === Layout === */
  --maxw-prose: 68ch;
  --maxw-content: 1100px;
  --maxw-wide: 1400px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* === Z-Index === */
  --z-base: 1;
  --z-nav: 50;
  --z-overlay: 100;
  --z-modal: 200;
}

/* Dunkles Hero/Tool = Default. Helle Inhaltsseiten überschreiben über .surface-light */
.surface-light {
  --bg: var(--white-diffuse);
  --fg: var(--black);
  --fg-muted: #4A4A4A;
  --accent: var(--red);
  --line-color: rgba(10, 10, 10, 0.12);
}

.surface-dark {
  --bg: var(--black);
  --fg: var(--white-diffuse);
  --fg-muted: rgba(244, 241, 238, 0.7);
  --accent: var(--red);
  --line-color: rgba(244, 241, 238, 0.18);
}