/* ============================================================
   KAAZ Design System — Colors & Typography
   Version 1.0 | kaaz.fr
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {

  /* ── Base Colors ─────────────────────────────────────── */
  --kaaz-black:        #0D0D0D;
  --kaaz-dark:         #1A1A1A;
  --kaaz-dark-2:       #222222;
  --kaaz-mid:          #2A2A2A;
  --kaaz-mid-2:        #3A3A3A;
  --kaaz-muted:        #6B6560;
  --kaaz-muted-2:      #8C8580;
  --kaaz-warm-white:   #F5F0E8;
  --kaaz-white:        #FFFFFF;

  /* ── Brand Accents ───────────────────────────────────── */
  --kaaz-gold:         #C9963A;
  --kaaz-gold-light:   #E8B95A;
  --kaaz-gold-dark:    #A07830;
  --kaaz-cta:          #FF6B35;
  --kaaz-cta-light:    #FF8B5C;
  --kaaz-cta-dark:     #E55428;
  --kaaz-green:        #3DBD8A;
  --kaaz-green-light:  #5ED4A3;
  --kaaz-green-dark:   #2A9A6E;

  /* ── Semantic Colors ─────────────────────────────────── */
  --color-bg:          var(--kaaz-black);
  --color-surface:     var(--kaaz-dark);
  --color-surface-2:   var(--kaaz-dark-2);
  --color-border:      var(--kaaz-mid);
  --color-border-subtle: var(--kaaz-mid-2);

  --color-fg:          var(--kaaz-warm-white);
  --color-fg-2:        var(--kaaz-muted-2);
  --color-fg-muted:    var(--kaaz-muted);

  --color-primary:     var(--kaaz-gold);
  --color-primary-hover: var(--kaaz-gold-light);
  --color-primary-dark: var(--kaaz-gold-dark);

  --color-cta:         var(--kaaz-cta);
  --color-cta-hover:   var(--kaaz-cta-light);

  --color-success:     var(--kaaz-green);
  --color-success-light: var(--kaaz-green-light);

  --color-error:       #E05252;
  --color-warning:     #E8A020;
  --color-info:        #4A9EE0;

  /* ── Typography — Families ───────────────────────────── */
  --font-display:      'Bricolage Grotesque', sans-serif;
  --font-body:         'DM Sans', sans-serif;
  --font-mono:         'JetBrains Mono', monospace;

  /* ── Typography — Weights ────────────────────────────── */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* ── Type Scale (major-third: 1.25×) ─────────────────── */
  --text-xs:    0.64rem;   /* 10.24px */
  --text-sm:    0.8rem;    /* 12.8px  */
  --text-base:  1rem;      /* 16px    */
  --text-md:    1.25rem;   /* 20px    */
  --text-lg:    1.563rem;  /* 25px    */
  --text-xl:    1.953rem;  /* 31px    */
  --text-2xl:   2.441rem;  /* 39px    */
  --text-3xl:   3.052rem;  /* 49px    */
  --text-4xl:   3.815rem;  /* 61px    */
  --text-5xl:   4.768rem;  /* 76px    */

  /* ── Line Heights ────────────────────────────────────── */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ── Letter Spacing ──────────────────────────────────── */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.14em;

  /* ── Spacing Scale (4px base) ────────────────────────── */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* ── Border Radius ───────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.35);
  --shadow-sm:  0 1px 6px 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-xl:  0 16px 48px rgba(0,0,0,0.7);

  --shadow-gold: 0 0 24px rgba(201,150,58,0.30);
  --shadow-cta:  0 0 20px rgba(255,107,53,0.30);

  /* ── Transitions ─────────────────────────────────────── */
  --ease-kaaz:    cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  --transition-base: var(--duration-base) var(--ease-kaaz);
  --transition-fast: var(--duration-fast) var(--ease-kaaz);

  /* ── Z-index Scale ───────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-nav:     400;

  /* ── Layout ──────────────────────────────────────────── */
  --max-width:      1280px;
  --nav-height:     64px;
  --sidebar-width:  256px;
}

/* ── Semantic Type Styles ────────────────────────────────── */

.kaaz-h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

.kaaz-h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}

.kaaz-h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-fg);
}

.kaaz-h4 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-fg);
}

.kaaz-h5 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-fg);
}

.kaaz-h6 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--color-fg);
}

.kaaz-lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-2);
}

.kaaz-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-fg);
}

.kaaz-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-fg-2);
}

.kaaz-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--color-fg-muted);
  text-transform: uppercase;
}

.kaaz-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--color-fg-2);
  text-transform: uppercase;
}

.kaaz-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--kaaz-gold);
}