/* ============================================================
   CUIK DESIGN TOKENS
   Source of truth for the Cuik brand system.
   Reference: Cuik Files/Presentation/Presentation.pdf
   ============================================================ */

/* ── Brand Colors ── */
:root {
  /* Primary palette */
  --color-gris-cendre:    #DADADA;    /* Backgrounds, borders, neutral surfaces */
  --color-orange-vif:     #FC5D1F;    /* Primary accent, CTAs, links, brand mark */
  --color-orange-hover:   #e8521a;    /* Orange hover/active state */
  --color-carbone:        #1D1D23;    /* Headings, body text on light backgrounds */
  --color-minuit:         #121133;    /* Dark backgrounds, dark theme base */
  --color-lavande:        #EA6EF4;    /* Secondary accent, highlights, special elements */

  /* Neutral surfaces */
  --color-surface-light:  #f5f4f2;    /* Page background (light mode) */
  --color-surface-white:  #ffffff;    /* Cards, elevated surfaces */
  --color-surface-muted:  #fafafa;    /* Secondary backgrounds, hover states */

  /* Text hierarchy */
  --color-text-heading:   #1D1D23;    /* H1, H2, H3 — Carbone */
  --color-text-body:      #6b7280;    /* Paragraphs, descriptions */
  --color-text-muted:     #8b8d98;    /* Labels, captions, secondary info */

  /* Borders */
  --color-border-default: #DADADA;    /* Default borders — Gris Cendré */
  --color-border-light:   rgba(0, 0, 0, 0.08);  /* Very subtle dividers */

  /* Semantic colors (status) */
  --color-success:  #22c55e;
  --color-error:    #ef4444;
  --color-warning:  #f59e0b;
  --color-info:     #3b82f6;
}

/* ── Typography ── */
:root {
  /* Font family — TWK Lausanne is the brand typeface */
  --font-brand:       'TWK Lausanne', system-ui, -apple-system, sans-serif;
  --font-fallback:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:        'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Type scale (from brand guide "Système typographique") */
  /* H1 — Hero titles, page headers */
  --font-size-h1:     clamp(36px, 5vw, 64px);
  --font-weight-h1:   800;
  --line-height-h1:   1.1;
  --letter-spacing-h1: -0.03em;

  /* H2 — Section titles */
  --font-size-h2:     clamp(28px, 4vw, 48px);
  --font-weight-h2:   700;
  --line-height-h2:   1.15;
  --letter-spacing-h2: -0.02em;

  /* H3 — Subsection titles */
  --font-size-h3:     clamp(20px, 3vw, 28px);
  --font-weight-h3:   600;
  --line-height-h3:   1.3;
  --letter-spacing-h3: -0.01em;

  /* Body — Paragraphs */
  --font-size-body:   16px;
  --font-weight-body: 400;
  --line-height-body: 1.6;

  /* Small — Captions, labels */
  --font-size-small:  14px;
  --font-weight-small: 400;
  --line-height-small: 1.5;

  /* Label — Buttons, tags, uppercase labels */
  --font-size-label:  13px;
  --font-weight-label: 600;
  --letter-spacing-label: 0.05em;
}

/* ── Spacing ── */
:root {
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   48px;
  --space-2xl:  80px;
  --space-3xl:  120px;
}

/* ── Radii ── */
:root {
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
}

/* ── Shadows ── */
:root {
  --shadow-card:    0 1px 3px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.04);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-float:   0 8px 30px rgba(0,0,0,0.1);
}

/* ── Glass / Glassmorphism ── */
:root {
  --glass-border:   5px solid rgba(255, 255, 255, 0.5);
  --glass-blur:     blur(12px);
  --glass-bg:       rgba(255, 255, 255, 0.08);
}

/* ── Font face declarations ── */
@font-face {
  font-family: 'TWK Lausanne';
  src: url('/cuik/fonts/TWKLausanne-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'TWK Lausanne';
  src: url('/cuik/fonts/TWKLausanne-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'TWK Lausanne';
  src: url('/cuik/fonts/TWKLausanne-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'TWK Lausanne';
  src: url('/cuik/fonts/TWKLausanne-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'TWK Lausanne';
  src: url('/cuik/fonts/TWKLausanne-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'TWK Lausanne';
  src: url('/cuik/fonts/TWKLausanne-900.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}