/*
Theme Name: Dark Jewelry
Theme URI: https://gitlab.com/dein-username/jewelry-theme
Author: Jona
Author URI: https://deine-website.at
Description: Dark luxury theme for a handmade jewelry shop. Gothic-inspired with metallic silver accents.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Private
Text Domain: dark-jewelry
Tags: woocommerce, dark, luxury, jewelry
*/

/* ============================================================
   CSS CUSTOM PROPERTIES – alle Farben/Abstände zentral hier
   ============================================================ */

:root {

  /* --- Farben --- */
  --color-bg:           #0e0e0f;
  --color-bg-surface:   #161618;
  --color-bg-elevated:  #1e1e21;

  --color-silver:       #c8c8d0;
  --color-silver-light: #e8e8f0;
  --color-silver-dark:  #8a8a96;
  --color-gold:         #b8a882;

  --color-text:         #e2e2e8;
  --color-text-muted:   #8a8a96;
  --color-text-faint:   #747481;

  --color-border:       #2a2a2f;
  --color-border-light: #3a3a42;

  --color-success:      #4a9a6a;
  --color-error:        #9a4a4a;
  --color-warning:      #9a7a3a;

  /* --- Typografie --- */
  --font-display: 'Cormorant Garamond', 'Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --text-xs:   0.82rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.08em;
  --tracking-widest:   0.2em;

  /* --- 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;

  /* --- Layout --- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --header-height: 72px;

  /* --- Borders & Radien --- */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  /* --- Schatten --- */
  --shadow-sm:         0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:         0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:         0 8px 32px rgba(0,0,0,0.6);
  --shadow-glow-silver:0 0 20px rgba(200,200,208,0.15);

  /* --- Übergänge --- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* --- Metallische Gradienten --- */
  --gradient-silver: linear-gradient(135deg, #8a8a96 0%, #c8c8d0 30%, #e8e8f0 50%, #c8c8d0 70%, #8a8a96 100%);
  --gradient-gold:   linear-gradient(135deg, #7a6a4a 0%, #b8a882 40%, #d4c49a 55%, #b8a882 70%, #7a6a4a 100%);
}