/* ============================================================
   PULSE TRADING — Design System
   Light theme · Fintech · Typographie mixte · Vivid accent
   ============================================================ */

/* ── Fonts auto-hébergées (remplace Google Fonts CDN) ───────── */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Serif Display';
  src: url('../fonts/DMSerifDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Serif Display';
  src: url('../fonts/DMSerifDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans.ttf') format('truetype');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono.ttf') format('truetype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {

  /* BACKGROUNDS */
  --bg-base:     #FAFAF9;   /* Fond de page — blanc chaud, pas pur */
  --bg-surface:  #FFFFFF;   /* Cards, panels, modals */
  --bg-subtle:   #F5F3FF;   /* Zones à fond teinté (hover, sidebar sections) */
  --bg-elevated: #EDE9FE;   /* États actifs légers */

  /* Gradient wash — halo de couleur aux bords de page */
  --bg-gradient: radial-gradient(
    ellipse 80% 60% at 50% -10%,
    rgba(99, 102, 241, 0.08) 0%,
    transparent 70%
  ),
  radial-gradient(
    ellipse 60% 50% at 100% 60%,
    rgba(139, 92, 246, 0.05) 0%,
    transparent 60%
  );

  /* BORDERS */
  --border:        #E4E4E7;   /* Default */
  --border-sub:    #C4B5FD;   /* Accent-teinté (focus, featured) */
  --border-strong: #A78BFA;   /* Forte mise en avant */

  /* TEXT */
  --text-1: #0C0A1E;   /* Quasi-noir légèrement violacé — profondeur */
  --text-2: #52525B;   /* Secondaire */
  --text-3: #9CA3AF;   /* Tertiaire, placeholders */

  /* ACCENT — Indigo profond */
  --accent:        #4F46E5;
  --accent-light:  #6366F1;
  --accent-subtle: rgba(79, 70, 229, 0.08);
  --accent-border: rgba(79, 70, 229, 0.20);
  --accent-text:   #4338CA;

  /* SEMANTIC — Hausse */
  --up:          #059669;
  --up-subtle:   rgba(5, 150, 105, 0.08);
  --up-border:   rgba(5, 150, 105, 0.20);
  --up-text:     #065F46;

  /* SEMANTIC — Baisse */
  --down:        #DC2626;
  --down-subtle: rgba(220, 38, 38, 0.08);
  --down-border: rgba(220, 38, 38, 0.20);
  --down-text:   #991B1B;

  /* SEMANTIC — Avertissement */
  --warn:        #D97706;
  --warn-subtle: rgba(217, 119, 6, 0.08);
  --warn-border: rgba(217, 119, 6, 0.20);
  --warn-text:   #92400E;

  /* TYPOGRAPHY */
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-serif:   'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* TYPE SCALE */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-hero: clamp(32px, 5vw, 52px);

  /* LINE HEIGHT */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* SPACING */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  20px;
  --s6:  24px;
  --s7:  28px;
  --s8:  32px;
  --s10: 40px;
  --s12: 48px;

  /* RADIUS */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* SHADOWS (light theme — teinté accent) */
  --shadow-sm:   0 1px 3px rgba(79, 70, 229, 0.06),  0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(79, 70, 229, 0.08), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg:   0 8px 24px rgba(79, 70, 229, 0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-pill: 0 4px 20px rgba(79, 70, 229, 0.15), 0 2px 8px rgba(0,0,0,0.08);

  /* EASING */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration: 160ms;
}