/* =========================================================================
   Moana Works — Design Tokens
   Einzige Quelle für Farben, Typo, Spacing, Radius, Shadow, Motion.
   ========================================================================= */

:root {
  /* Surfaces (Dark-Mode Default) */
  --surface: #0A0F14;
  --surface-raised: #121821;
  --surface-subtle: #1E2632;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --text: #E8EDF2;
  --text-muted: #8A97A8;
  --text-subtle: #5C6776;

  /* Accent (Current) */
  --accent: #00B8A9;
  --accent-hover: #00D4C3;
  --accent-subtle: rgba(0, 184, 169, 0.12);
  --accent-text: #0A0F14;   /* Text-Farbe auf accent-Flächen */

  /* Secondary */
  --depth: #1E3A5F;
  --signal: #FFB020;
  --danger: #E84C3D;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;
  --fs-4xl:  3.75rem;
  --fs-5xl:  5rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-base:    1.55;
  --lh-relaxed: 1.7;

  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* Spacing (Basis 4) */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.5rem;
  --s-8:  3rem;
  --s-10: 4rem;
  --s-12: 6rem;
  --s-14: 8rem;
  --s-16: 10rem;

  /* Layout */
  --container-max: 1200px;
  --prose-max:     680px;
  --page-pad:      clamp(1.25rem, 4vw, 3rem);

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

  /* Shadow (Dark) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow:    0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);

  /* Motion */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index */
  --z-nav:     100;
  --z-modal:   500;
  --z-toast:   800;
}

/* =========================================================================
   Light-Mode Overrides
   ========================================================================= */

:root[data-theme="light"] {
  --surface: #F7F6F1;
  --surface-raised: #ECEBE4;
  --surface-subtle: #FFFFFF;
  --border: rgba(10, 15, 20, 0.1);
  --border-strong: rgba(10, 15, 20, 0.2);

  --text: #0A0F14;
  --text-muted: #4A5561;
  --text-subtle: #8A97A8;

  --accent: #008579;
  --accent-hover: #00A395;
  --accent-subtle: rgba(0, 133, 121, 0.12);
  --accent-text: #FFFFFF;

  --signal: #C47D00;

  --shadow-sm: 0 1px 2px rgba(10, 15, 20, 0.08);
  --shadow:    0 4px 20px rgba(10, 15, 20, 0.12);
  --shadow-lg: 0 12px 40px rgba(10, 15, 20, 0.18);
}