/* ============================================================
   Förder-Assistent Design Tokens
   Corporate Identity: Navy + Gold
   Trust • Expertise • Clarity • Modernity • Precision
   ============================================================ */

:root {
  /* ── Raw Palette: Navy ────────────────────────────────── */
  --navy-950: #080E1A;
  --navy-900: #0F1B2D;
  --navy-800: #17233C;
  --navy-700: #1E2E4A;
  --navy-600: #2A3D5F;
  --navy-500: #3D5278;
  --navy-400: #5A7199;
  --navy-300: #8498B7;
  --navy-200: #B4C1D5;
  --navy-100: #D8DFE9;
  --navy-50:  #EDF0F5;

  /* ── Raw Palette: Gold ────────────────────────────────── */
  --gold-900: #78350F;
  --gold-800: #92400E;
  --gold-700: #B45309;
  --gold-600: #D97706;
  --gold-500: #F59E0B;
  --gold-400: #FBBF24;
  --gold-300: #FCD34D;
  --gold-200: #FDE68A;
  --gold-100: #FEF3C7;
  --gold-50:  #FFFBEB;

  /* ── Raw Palette: Emerald (sustainability, success) ──── */
  --emerald-700: #047857;
  --emerald-600: #059669;
  --emerald-500: #10B981;
  --emerald-100: #D1FAE5;
  --emerald-50:  #ECFDF5;

  /* ── Raw Palette: Red (error, warning) ────────────────── */
  --red-600: #DC2626;
  --red-100: #FEE2E2;
  --red-50:  #FEF2F2;

  /* ── Raw Palette: Stone (warm neutrals) ───────────────── */
  --stone-950: #0C0A09;
  --stone-900: #1C1917;
  --stone-800: #292524;
  --stone-700: #44403C;
  --stone-600: #57534E;
  --stone-500: #78716C;
  --stone-400: #A8A29E;
  --stone-300: #D6D3D1;
  --stone-200: #E7E5E4;
  --stone-100: #F5F5F4;
  --stone-50:  #FAFAF9;
  --white:     #FFFFFF;

  /* ── Semantic: Colors ─────────────────────────────────── */
  --color-bg:          var(--white);
  --color-bg-subtle:   var(--stone-50);
  --color-bg-muted:    var(--stone-100);
  --color-bg-dark:     var(--navy-900);
  --color-bg-hero:     var(--navy-800);

  --color-text:        var(--stone-900);
  --color-text-secondary: var(--stone-500);
  --color-text-muted:  var(--stone-400);
  --color-text-inverse: var(--white);
  --color-text-on-dark: var(--stone-200);

  --color-primary:     var(--navy-800);
  --color-primary-hover: var(--navy-700);
  --color-accent:      var(--gold-500);
  --color-accent-hover: var(--gold-600);
  --color-accent-soft: var(--gold-100);

  --color-success:     var(--emerald-600);
  --color-success-bg:  var(--emerald-50);
  --color-error:       var(--red-600);
  --color-error-bg:    var(--red-50);

  --color-border:      var(--stone-200);
  --color-border-subtle: var(--stone-100);
  --color-border-strong: var(--stone-300);

  --color-link:        var(--navy-700);
  --color-link-hover:  var(--gold-600);

  /* ── Semantic: Typography ─────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --text-sm:   clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.938rem, 0.875rem + 0.3vw, 1.063rem);
  --text-lg:   clamp(1.063rem, 0.95rem + 0.5vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --text-3xl:  clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  --text-4xl:  clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);
  --text-5xl:  clamp(2.75rem, 2rem + 3.75vw, 4.5rem);

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;

  /* ── Semantic: Spacing ────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── Semantic: Layout ─────────────────────────────────── */
  --max-width-content: 72rem;    /* 1152px */
  --max-width-narrow:  42rem;    /* 672px — for reading */
  --max-width-wide:    90rem;    /* 1440px */
  --gutter:            clamp(1rem, 3vw, 2rem);

  /* ── Semantic: Shape ──────────────────────────────────── */
  --radius-sm:   0.375rem;  /* 6px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ── Semantic: Shadow ─────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(12, 10, 9, 0.05);
  --shadow-sm:  0 1px 3px rgba(12, 10, 9, 0.08), 0 1px 2px rgba(12, 10, 9, 0.04);
  --shadow-md:  0 4px 6px rgba(12, 10, 9, 0.07), 0 2px 4px rgba(12, 10, 9, 0.04);
  --shadow-lg:  0 10px 15px rgba(12, 10, 9, 0.08), 0 4px 6px rgba(12, 10, 9, 0.04);
  --shadow-xl:  0 20px 25px rgba(12, 10, 9, 0.08), 0 8px 10px rgba(12, 10, 9, 0.03);

  /* ── Semantic: Motion ─────────────────────────────────── */
  --ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
}