/* ============================================================
   DESIGN TOKENS — CSS Custom Properties
   Part of litzki-systems.com design system
   ============================================================ */

/* ============================================================
   LITZKI SYSTEMS — Redesign CSS
   Litzki Universe Design System
   Gold #C9A84C — universeller Akzent des gesamten Universums
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------ */
:root {
  /* Brand Colors — gemeinsames Fundament */
  --color-navy:          #0F1F3D;   /* Universelle Tiefe — Backgrounds, Headlines, Footer */
  --color-navy-dark:     #080F1E;   /* Tiefster Hintergrund */
  --color-navy-mid:      #162845;   /* Mittlere Navyebene, Karten */
  --color-navy-light:    #1E3660;   /* Hover States, Borders */
  --color-off-white:     #F8F7F4;   /* Gemeinsamer Seitengrund — warm, nicht kalt */
  --color-white:         #FFFFFF;

  /* Akzent — Gold (Litzki Universum) — identisch mit CERTavia */
  --color-accent:        #C9A84C;   /* Gold — universeller Akzent */
  --color-accent-dark:   #A88A35;   /* Hover, Active, Buttons */
  --color-accent-light:  #D9B86A;   /* Soft Highlight, Footer-Labels */
  --color-accent-bg:     #FBF7EE;   /* Sehr heller Gold-Tint auf Off-White */
  --color-accent-muted:  #3D2E0F;   /* Gedämpftes Gold für Borders auf Navy */

  /* Neutrals */
  --color-gray-900:      #0F172A;
  --color-gray-800:      #1E293B;
  --color-gray-700:      #334155;
  --color-gray-600:      #475569;
  --color-gray-500:      #64748B;
  --color-gray-400:      #94A3B8;
  --color-gray-300:      #CBD5E1;
  --color-gray-200:      #E2E8F0;
  --color-gray-100:      #F1F5F9;
  --color-gray-50:       #F8FAFC;

  /* Semantic */
  --color-success:       #10B981;
  --color-certified:     #D1FAE5;
  --color-danger:        #EF4444;

  /* Typografie */
  --font-serif:  'EB Garamond', 'Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Schriftgrößen */
  --text-xs:    0.875rem;   /* 14px — Minimum */
  --text-sm:    0.925rem;   /* ~14.8px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */

  /* Gewichte */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Zeilenhöhen */
  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Abstände */
  --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;
  --space-32:  8rem;

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

  /* Schatten */
  --shadow-sm:   0 1px 2px 0 rgba(15, 31, 61, 0.06);
  --shadow-md:   0 4px 6px -1px rgba(15, 31, 61, 0.10), 0 2px 4px -2px rgba(15, 31, 61, 0.06);
  --shadow-lg:   0 10px 15px -3px rgba(15, 31, 61, 0.12), 0 4px 6px -4px rgba(15, 31, 61, 0.08);
  --shadow-accent: 0 4px 14px 0 rgba(201, 168, 76, 0.25);

  /* Layout */
  --container-max: 1280px;
  --content-max:   720px;
  --section-gap:   var(--space-24);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* Z-Index */
  --z-base:      1;
  --z-dropdown: 100;
  --z-nav:      200;
  --z-bar:      300;

  /* Legacy variable aliases — map old dark-theme vars to new tokens */
  --bg-color:             var(--color-white);
  --text-color:           var(--color-gray-700);
  --accent-color:         var(--color-accent);
  --border-color:         var(--color-gray-200);
  --muted-color:          var(--color-gray-500);
  --content-padding:      var(--space-6);
  --content-padding-mobile: var(--space-4);
}