/* ============================================================
   CÁMARA DEL TRADER — Foundations
   Colors + Typography tokens
   Dark Mode is the ONLY mode. "Forjando la nueva era del trading."
   ============================================================ */

/* --- Webfonts (brand-specified) ---------------------------------
   Headers: Orbitron / Rajdhani (Bold/ExtraBold) — tech, solid, modern
   Body:    Inter — clean sans-serif for long technical reads
   Loaded from Google Fonts. If working offline, self-host these.
----------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ============================================================
     CORE PALETTE — corporate, exact hexes from brand manual
     ============================================================ */
  --abyssal-black:   #0B0C10;  /* Negro Abisal  — main canvas */
  --carbon-gray:     #1F2833;  /* Gris Carbón   — cards, menus, separators */
  --neon-cyan:       #00E5FF;  /* Azul Neón     — mind/psychology, links, technical */
  --neon-magenta:    #FF007F;  /* Rosa Neón     — CTAs, bullish candles, profit */
  --ice-white:       #F2F2F2;  /* Blanco Hielo  — primary reading text */

  /* ============================================================
     EXTENDED SURFACES — derived for depth in an all-dark UI
     ============================================================ */
  --surface-0:  #07080B;  /* deepest — page void behind canvas */
  --surface-1:  #0B0C10;  /* base canvas (abyssal) */
  --surface-2:  #12161D;  /* raised panel */
  --surface-3:  #1F2833;  /* card (carbon) */
  --surface-4:  #2A3744;  /* hover card / elevated */
  --hairline:   rgba(0, 229, 255, 0.14); /* faint cyan grid/borders */
  --hairline-strong: rgba(0, 229, 255, 0.32);
  --divider:    rgba(242, 242, 242, 0.08);

  /* ============================================================
     TEXT TONES
     ============================================================ */
  --fg-1: #F2F2F2;                       /* primary text (ice white) */
  --fg-2: rgba(242, 242, 242, 0.66);     /* secondary / supporting */
  --fg-3: rgba(242, 242, 242, 0.42);     /* tertiary / captions, legal */
  --fg-on-magenta: #FFFFFF;              /* text on magenta CTA */
  --fg-on-cyan:    #04141A;              /* text on cyan fill (dark) */

  /* ============================================================
     ACCENT SCALES (tints/shades for states)
     ============================================================ */
  --cyan-bright:  #5CF0FF;
  --cyan:         #00E5FF;
  --cyan-deep:    #00B8CC;
  --cyan-soft:    rgba(0, 229, 255, 0.12);  /* tinted fills, chips */
  --cyan-soft-2:  rgba(0, 229, 255, 0.06);

  --magenta-bright: #FF3D9A;
  --magenta:        #FF007F;
  --magenta-deep:   #CC0066;
  --magenta-soft:   rgba(255, 0, 127, 0.12);
  --magenta-soft-2: rgba(255, 0, 127, 0.05);

  /* ============================================================
     SEMANTIC — market language
     ============================================================ */
  --bullish: #FF007F;   /* per brand: magenta = velas alcistas / profit */
  --bearish: #00E5FF;   /* cyan reads as the cool counterpart */
  --warning: #FFB020;
  --danger:  #FF4D4D;

  /* ============================================================
     NEON GLOWS — the signature effect. Use sparingly as accent.
     ============================================================ */
  --glow-cyan:    0 0 8px rgba(0, 229, 255, 0.55), 0 0 24px rgba(0, 229, 255, 0.28);
  --glow-cyan-sm: 0 0 6px rgba(0, 229, 255, 0.45);
  --glow-magenta: 0 0 8px rgba(255, 0, 127, 0.6), 0 0 26px rgba(255, 0, 127, 0.32);
  --glow-magenta-sm: 0 0 6px rgba(255, 0, 127, 0.5);
  --text-glow-cyan:    0 0 12px rgba(0, 229, 255, 0.5);
  --text-glow-magenta: 0 0 12px rgba(255, 0, 127, 0.55);

  /* ============================================================
     ELEVATION (shadows on near-black need to be deep + soft)
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-3: 0 12px 40px rgba(0,0,0,0.6);
  --shadow-card: 0 2px 0 rgba(0,0,0,0.3), 0 16px 40px -12px rgba(0,0,0,0.7);

  /* ============================================================
     RADII — modern but restrained (corporate sobriety)
     ============================================================ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ============================================================
     SPACING (8pt base)
     ============================================================ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ============================================================
     TYPE FAMILIES
     ============================================================ */
  --font-display: 'Orbitron', 'Rajdhani', system-ui, sans-serif;  /* H1/H2 hero, logotype */
  --font-head:    'Rajdhani', 'Orbitron', system-ui, sans-serif;  /* section heads, labels */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;  /* paragraphs, UI */
  --font-mono:    'Inter', ui-monospace, monospace;

  /* ============================================================
     TYPE SCALE — semantic roles
     Display uses Orbitron with tight tracking; heads use Rajdhani.
     ============================================================ */
  --h1-size: clamp(40px, 6vw, 72px);
  --h1-weight: 800;
  --h1-tracking: 0.01em;
  --h1-leading: 1.04;

  --h2-size: clamp(30px, 4vw, 48px);
  --h2-weight: 700;
  --h2-leading: 1.08;

  --h3-size: clamp(22px, 2.4vw, 30px);
  --h3-weight: 700;
  --h3-leading: 1.15;

  --eyebrow-size: 14px;        /* Rajdhani uppercase label above heads */
  --eyebrow-weight: 600;
  --eyebrow-tracking: 0.22em;

  --body-lg-size: 19px;
  --body-size: 16px;
  --body-sm-size: 14px;
  --body-leading: 1.65;

  --caption-size: 12.5px;
  --caption-tracking: 0.04em;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS — apply on a .cdt-scope wrapper
   so the design system can be previewed without leaking globals.
   ============================================================ */
.cdt-scope {
  background: var(--surface-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
}

.cdt-scope h1, .cdt-h1 {
  font-family: var(--font-display);
  font-weight: var(--h1-weight);
  font-size: var(--h1-size);
  letter-spacing: var(--h1-tracking);
  line-height: var(--h1-leading);
  color: var(--fg-1);
  text-transform: uppercase;
  margin: 0;
}

.cdt-scope h2, .cdt-h2 {
  font-family: var(--font-display);
  font-weight: var(--h2-weight);
  font-size: var(--h2-size);
  line-height: var(--h2-leading);
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
}

.cdt-scope h3, .cdt-h3 {
  font-family: var(--font-head);
  font-weight: var(--h3-weight);
  font-size: var(--h3-size);
  line-height: var(--h3-leading);
  color: var(--fg-1);
  letter-spacing: 0.01em;
  margin: 0;
}

.cdt-eyebrow {
  font-family: var(--font-head);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--neon-cyan);
}

.cdt-scope p, .cdt-p {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.cdt-lead {
  font-size: var(--body-lg-size);
  color: var(--fg-2);
  line-height: 1.6;
}

.cdt-scope a, .cdt-link {
  color: var(--neon-cyan);
  text-decoration: none;
  transition: color 140ms ease, text-shadow 140ms ease;
}
.cdt-scope a:hover, .cdt-link:hover {
  text-shadow: var(--text-glow-cyan);
}

.cdt-caption {
  font-size: var(--caption-size);
  letter-spacing: var(--caption-tracking);
  color: var(--fg-3);
}

/* gradient text used on hero key words */
.cdt-gradient-text {
  background: linear-gradient(100deg, var(--neon-cyan), var(--neon-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}