/* ╔══════════════════════════════════════════════════╗
   ║  MARKUS CI — Design Tokens                       ║
   ║  Palette: Obsidian & Terracotta                   ║
   ║  Version: 1.0 · Februar 2026                      ║
   ║                                                    ║
   ║  Einbinden:                                        ║
   ║  @import url('./markus-ci.css');                    ║
   ║  oder :root-Block kopieren                         ║
   ╚══════════════════════════════════════════════════╝ */

/* Google Fonts – im HTML einbinden:
   <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
*/

:root {
  /* Core Palette */
  --m-primary:          #14181f;
  --m-primary-light:    #222a38;
  --m-primary-medium:   #3d4d65;
  --m-primary-soft:     #607891;
  --m-primary-muted:    #8a9bb0;

  /* Accent: Terracotta */
  --m-accent:           #b55a42;
  --m-accent-hover:     #c9674d;
  --m-accent-light:     #d4836e;
  --m-accent-subtle:    #f3e8e4;
  --m-accent-glow:      rgba(181, 90, 66, 0.18);

  /* Semantic / Status */
  --m-success:            #34a853;
  --m-success-subtle:     #dcfce7;
  --m-success-dark:       #052e16;
  --m-success-text:       #15803d;
  --m-success-text-dark:  #4ade80;
  --m-warning:            #f9ab00;
  --m-warning-subtle:     #fef3c7;
  --m-warning-dark:       #451a03;
  --m-warning-text:       #92400e;
  --m-warning-text-dark:  #fbbf24;
  --m-error:              #ea4335;
  --m-error-subtle:       #fee2e2;
  --m-error-dark:         #350a0a;
  --m-error-text:         #b91c1c;
  --m-error-text-dark:    #f87171;

  /* Light Mode Surfaces */
  --m-bg:               #f3f4f7;
  --m-surface:          #ffffff;
  --m-surface-raised:   #ffffff;
  --m-border:           #d8dce5;
  --m-border-light:     #eceef2;
  --m-text:             #14181f;
  --m-text-secondary:   #4a5568;
  --m-text-muted:       #8a9bb0;
  --m-text-inverse:     #ffffff;

  /* Dark Mode Surfaces */
  --m-dark-bg:              #0a0d12;
  --m-dark-surface:         #141820;
  --m-dark-surface-raised:  #1e2535;
  --m-dark-border:          #283040;
  --m-dark-border-light:    #1e2535;
  --m-dark-text:            #e2e8f0;
  --m-dark-text-secondary:  #98a8bc;
  --m-dark-text-muted:      #506680;

  /* Typography */
  --m-font-display: 'Instrument Serif', Georgia, serif;
  --m-font-sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --m-font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --m-text-xs:    0.75rem;
  --m-text-sm:    0.875rem;
  --m-text-base:  1rem;
  --m-text-lg:    1.125rem;
  --m-text-xl:    1.25rem;
  --m-text-2xl:   1.5rem;
  --m-text-3xl:   2rem;
  --m-text-4xl:   2.5rem;
  --m-text-5xl:   3.25rem;

  --m-leading-tight:    1.15;
  --m-leading-snug:     1.3;
  --m-leading-normal:   1.55;
  --m-leading-relaxed:  1.7;

  --m-weight-light:     300;
  --m-weight-regular:   400;
  --m-weight-medium:    500;
  --m-weight-semibold:  600;
  --m-weight-bold:      700;
  --m-weight-extrabold: 800;

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

  /* Border Radius */
  --m-radius-xs:   4px;
  --m-radius-sm:   6px;
  --m-radius-md:   10px;
  --m-radius-lg:   14px;
  --m-radius-xl:   20px;
  --m-radius-2xl:  24px;
  --m-radius-full: 9999px;

  /* Shadows */
  --m-shadow-xs:      0 1px 2px rgba(0,0,0,0.05);
  --m-shadow-sm:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --m-shadow-md:      0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --m-shadow-lg:      0 8px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
  --m-shadow-xl:      0 16px 48px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.06);
  --m-shadow-glow:    0 0 24px var(--m-accent-glow);
  --m-shadow-glow-lg: 0 0 48px var(--m-accent-glow);
  --m-shadow-inner:   inset 0 1px 3px rgba(0,0,0,0.06);

  /* Transitions */
  --m-ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --m-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --m-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --m-duration-fast:    150ms;
  --m-duration-base:    250ms;
  --m-duration-slow:    400ms;
  --m-duration-slower:  600ms;
  --m-transition-fast:  var(--m-duration-fast) var(--m-ease);
  --m-transition-base:  var(--m-duration-base) var(--m-ease);
  --m-transition-slow:  var(--m-duration-slow) var(--m-ease);
}

/* Dark Mode */
[data-theme="dark"] {
  --m-bg:             var(--m-dark-bg);
  --m-surface:        var(--m-dark-surface);
  --m-surface-raised: var(--m-dark-surface-raised);
  --m-border:         var(--m-dark-border);
  --m-border-light:   var(--m-dark-border-light);
  --m-text:           var(--m-dark-text);
  --m-text-secondary: var(--m-dark-text-secondary);
  --m-text-muted:     var(--m-dark-text-muted);
  --m-accent-subtle:  rgba(181, 90, 66, 0.12);
  --m-success-subtle: var(--m-success-dark);
  --m-success-text:   var(--m-success-text-dark);
  --m-warning-subtle: var(--m-warning-dark);
  --m-warning-text:   var(--m-warning-text-dark);
  --m-error-subtle:   var(--m-error-dark);
  --m-error-text:     var(--m-error-text-dark);
  --m-shadow-sm:      0 1px 3px rgba(0,0,0,0.3);
  --m-shadow-md:      0 4px 12px rgba(0,0,0,0.4);
  --m-shadow-lg:      0 8px 24px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m-bg:             var(--m-dark-bg);
    --m-surface:        var(--m-dark-surface);
    --m-surface-raised: var(--m-dark-surface-raised);
    --m-border:         var(--m-dark-border);
    --m-border-light:   var(--m-dark-border-light);
    --m-text:           var(--m-dark-text);
    --m-text-secondary: var(--m-dark-text-secondary);
    --m-text-muted:     var(--m-dark-text-muted);
    --m-accent-subtle:  rgba(181, 90, 66, 0.12);
  }
}