/* ============================================================
   Design-Token-Set "Midnight & mint"
   IT-Software & Consulting
   Drei Schichten: Primitive -> Semantic -> Component
   Quelle der Wahrheit: tokens.json (W3C DTCG)
   ============================================================ */

/* === LAYER 1: PRIMITIVES ==================================== */
:root {
  /* Navy — Primärrampe (Marke: #0D1B2A, #1B3A4B) */
  --color-navy-50:  #EEF3F7;
  --color-navy-100: #D8E3EB;
  --color-navy-200: #B3C8D6;
  --color-navy-300: #8BAABD;
  --color-navy-400: #5F869E;
  --color-navy-500: #3E657D;
  --color-navy-600: #2C4F63;
  --color-navy-700: #1B3A4B; /* Marke: Petrol */
  --color-navy-800: #142B3A;
  --color-navy-900: #0D1B2A; /* Marke: Midnight */
  --color-navy-950: #081220;

  /* Mint — Akzentrampe (Marke: #2EC4A9, #9BE8D8) */
  --color-mint-50:  #E9FBF6;
  --color-mint-100: #C9F4E8;
  --color-mint-200: #9BE8D8; /* Marke: Mint hell */
  --color-mint-300: #6BDCC4;
  --color-mint-400: #45D0B5;
  --color-mint-500: #2EC4A9; /* Marke: Mint */
  --color-mint-600: #21A18B;
  --color-mint-700: #197D6D;
  --color-mint-800: #135D51;
  --color-mint-900: #0E4038;
  --color-mint-950: #07251F;

  /* Neutral — kühlgrün getönt (Marke: #F2F7F5) */
  --color-neutral-50:  #F2F7F5; /* Marke: Off-White */
  --color-neutral-100: #E4ECE9;
  --color-neutral-200: #CDD9D5;
  --color-neutral-300: #AEBEB9;
  --color-neutral-400: #8A9C97;
  --color-neutral-500: #6B7D78;
  --color-neutral-600: #53645F;
  --color-neutral-700: #42504C;
  --color-neutral-800: #313C39;
  --color-neutral-900: #222B29;
  --color-neutral-950: #131A18;

  /* Statusfarben */
  --color-green-100: #DCFCE7;
  --color-green-500: #22C55E;
  --color-green-600: #16A34A;
  --color-green-800: #166534;
  --color-amber-100: #FEF3C7;
  --color-amber-500: #F59E0B;
  --color-amber-600: #D97706;
  --color-amber-800: #92400E;
  --color-red-100:   #FEE2E2;
  --color-red-500:   #EF4444;
  --color-red-600:   #DC2626;
  --color-red-800:   #991B1B;
  --color-blue-100:  #DBEAFE;
  --color-blue-500:  #3B82F6;
  --color-blue-600:  #2563EB;
  --color-blue-800:  #1E40AF;
  --color-white:     #FFFFFF;

  /* Typografie */
  --font-heading: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', monospace;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  1.875rem;  /* 30px */
  --font-size-4xl:  2.25rem;   /* 36px */
  --font-size-5xl:  3rem;      /* 48px */

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.2;
  --line-height-snug:    1.4;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.75;

  /* Abstände (4px-Basis) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radien */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* Schatten (navy-getönt statt schwarz) */
  --shadow-sm: 0 1px 2px 0 rgb(13 27 42 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(13 27 42 / 0.08), 0 2px 4px -2px rgb(13 27 42 / 0.06);
  --shadow-lg: 0 10px 15px -3px rgb(13 27 42 / 0.10), 0 4px 6px -4px rgb(13 27 42 / 0.08);

  /* Animation */
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* === LAYER 2: SEMANTIC (Light Mode) ========================= */
:root {
  /* Teilt dem Browser mit, dass die Seite beide Modi selbst beherrscht —
     verhindert, dass Chrome/Edge "Auto Dark Mode" die Farben umrechnet */
  color-scheme: light;
  --color-background:           var(--color-neutral-50);
  --color-surface:              var(--color-white);
  --color-surface-raised:       var(--color-white);
  --color-foreground:           var(--color-navy-900);
  --color-foreground-secondary: var(--color-navy-600);
  --color-foreground-muted:     var(--color-neutral-500);

  --color-primary:            var(--color-navy-900);
  --color-primary-hover:      var(--color-navy-700);
  --color-primary-foreground: var(--color-neutral-50);

  /* Akzent: Mint. Text auf Mint immer dunkel (Kontrast 7.9:1). */
  --color-accent:            var(--color-mint-500);
  --color-accent-hover:      var(--color-mint-400);
  --color-accent-foreground: var(--color-navy-950);
  --color-accent-subtle:     var(--color-mint-50);
  --color-accent-text:       var(--color-mint-700); /* Mint als Text auf hellem Grund */

  --color-border:        var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-ring:          var(--color-mint-500);

  --color-success:      var(--color-green-600);
  --color-success-bg:   var(--color-green-100);
  --color-success-text: var(--color-green-800);
  --color-warning:      var(--color-amber-600);
  --color-warning-bg:   var(--color-amber-100);
  --color-warning-text: var(--color-amber-800);
  --color-danger:       var(--color-red-600);
  --color-danger-bg:    var(--color-red-100);
  --color-danger-text:  var(--color-red-800);
  --color-info:         var(--color-blue-600);
  --color-info-bg:      var(--color-blue-100);
  --color-info-text:    var(--color-blue-800);

  --spacing-component:   var(--space-4);
  --spacing-card:        var(--space-6);
  --spacing-section:     var(--space-16);
  --spacing-page-gutter: var(--space-6);
}

/* === LAYER 2: SEMANTIC (Dark Mode) ========================== */
.dark {
  color-scheme: dark;
  --color-background:           var(--color-navy-950);
  --color-surface:              var(--color-navy-900);
  --color-surface-raised:       var(--color-navy-800);
  --color-foreground:           var(--color-neutral-50);
  --color-foreground-secondary: var(--color-navy-200);
  --color-foreground-muted:     var(--color-navy-300);

  --color-primary:            var(--color-neutral-50);
  --color-primary-hover:      var(--color-navy-100);
  --color-primary-foreground: var(--color-navy-900);

  --color-accent-hover:  var(--color-mint-400);
  --color-accent-subtle: var(--color-mint-950);
  --color-accent-text:   var(--color-mint-300);

  --color-border:        var(--color-navy-700);
  --color-border-strong: var(--color-navy-600);

  --color-success-bg:   #0C2E1A;
  --color-success-text: #4ADE80;
  --color-warning-bg:   #3A2606;
  --color-warning-text: #FBBF24;
  --color-danger-bg:    #3B0D0D;
  --color-danger-text:  #F87171;
  --color-info-bg:      #0F2350;
  --color-info-text:    #93C5FD;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.35);
}

/* === LAYER 3: COMPONENTS ==================================== */
:root {
  /* Button primary (CTA) — Mint mit dunklem Text */
  --button-primary-bg:        var(--color-accent);
  --button-primary-fg:        var(--color-accent-foreground);
  --button-primary-hover-bg:  var(--color-accent-hover);
  --button-primary-padding-x: var(--space-5);
  --button-primary-padding-y: var(--space-3);
  --button-primary-radius:    var(--radius-md);
  --button-primary-weight:    var(--font-weight-semibold);

  /* Button secondary — Outline */
  --button-secondary-bg:       transparent;
  --button-secondary-fg:       var(--color-primary);
  --button-secondary-border:   var(--color-primary);
  --button-secondary-hover-bg: var(--color-navy-50);

  /* Input */
  --input-bg:          var(--color-surface);
  --input-border:      var(--color-border-strong);
  --input-focus-ring:  var(--color-ring);
  --input-placeholder: var(--color-foreground-muted);
  --input-radius:      var(--radius-md);
  --input-padding-x:   var(--space-3);
  --input-padding-y:   var(--space-2);

  /* Card */
  --card-bg:      var(--color-surface);
  --card-border:  var(--color-border);
  --card-radius:  var(--radius-lg);
  --card-padding: var(--spacing-card);
  --card-shadow:  var(--shadow-sm);

  /* Navbar */
  --navbar-bg:         var(--color-navy-900);
  --navbar-fg:         var(--color-neutral-50);
  --navbar-link-hover: var(--color-mint-300);
  --navbar-height:     4rem;

  /* Footer */
  --footer-bg:   var(--color-navy-950);
  --footer-fg:   var(--color-neutral-300);
  --footer-link: var(--color-mint-300);

  /* Link */
  --link-fg:       var(--color-accent-text);
  --link-hover-fg: var(--color-mint-800);

  /* Code-Block — dunkel mit Mint-Text (passend zur Marke) */
  --code-bg:     var(--color-navy-900);
  --code-fg:     var(--color-mint-200);
  --code-radius: var(--radius-md);

  /* Badge / Tag */
  --badge-bg:     var(--color-accent-subtle);
  --badge-fg:     var(--color-mint-800);
  --badge-radius: var(--radius-full);
}

.dark {
  --button-secondary-hover-bg: var(--color-navy-800);
  --link-hover-fg: var(--color-mint-200);
  --badge-fg: var(--color-mint-200);
}

/* === BASIS-STYLES (optional, zum Direktstart) ================ */
body {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-foreground);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-semibold);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }

a {
  color: var(--link-fg);
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--link-hover-fg); }

code, pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}