/* Trading Algo Academy — Design Tokens
 * Extracted from Manual-TAA.pdf (6 pages) + visual inspection.
 * ---------------------------------------------------------- */

/* Fonts
 * ------
 * Display face: REAL **Mortend** (Bold) — uploaded by the brand team.
 *   Only Bold weight shipped so far. For light/regular weights we currently fall
 *   back to Saira Condensed until the full family arrives.
 * Secondary face: REAL **Ruberoid** (Pepper Type) — uploaded by the brand team.
 *   Currently only UltraLight (200) + UltraLight Oblique shipped; Regular / Bold
 *   still pending from the foundry. For weights ≥ 300 we fall back to Saira.
 * Mono: JetBrains Mono (additive, for price/data display). */
@import url('https://fonts.googleapis.com/css2?family=Saira:wght@300;400;500;600;700;800&family=Saira+Condensed:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

@font-face {
  font-family: 'Mortend';
  src: url('fonts/Mortend_Bold.otf') format('opentype'),
       url('fonts/Mortend_Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ruberoid';
  src: url('fonts/Pepper_Type_-_Ruberoid-UltraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ruberoid';
  src: url('fonts/Pepper_Type_-_Ruberoid-UltraLightOblique.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ============ CORE PALETTE (from Manual-TAA page 3) ============ */
  --taa-blue:        #0078ff;   /* Colores Principales — primary brand */
  --taa-blue-cyan:   #00F2FE;   /* Colores Principales — cyan accent   */
  --taa-green:       #00ff5d;   /* Texto 2 — signal green (accents, CTAs) */
  --taa-green-dark:  #009f5a;   /* Gradient endpoint for greens        */
  --taa-bg:          #0d0d0d;   /* Backgroum — near-black base         */

  /* ============ EXTENDED NEUTRALS (derived) ============ */
  --taa-black:       #000000;
  --taa-ink-900:     #0a0a0a;
  --taa-ink-800:     #121418;
  --taa-ink-700:     #171a20;
  --taa-ink-600:     #1e2128;   /* card surface            */
  --taa-ink-500:     #272b33;   /* card border / subtle divider */
  --taa-ink-400:     #3b404a;
  --taa-ink-300:     #5a616d;
  --taa-ink-200:     #8b93a1;   /* secondary text on dark  */
  --taa-ink-100:     #c8ccd4;
  --taa-white:       #ffffff;
  --taa-off-white:   #eef1f5;

  /* ============ SEMANTIC ============ */
  --bg-0: var(--taa-bg);             /* page background          */
  --bg-1: var(--taa-ink-800);        /* elevated surface         */
  --bg-2: var(--taa-ink-700);        /* card surface             */
  --bg-3: var(--taa-ink-600);        /* nested card              */
  --fg-1: var(--taa-white);          /* primary text on dark     */
  --fg-2: var(--taa-ink-100);        /* secondary text           */
  --fg-3: var(--taa-ink-200);        /* tertiary / muted         */
  --fg-4: var(--taa-ink-300);        /* disabled                 */
  --border-1: rgba(255,255,255,.08); /* hairline on dark card    */
  --border-2: rgba(255,255,255,.14); /* stronger hairline        */
  --border-accent: var(--taa-blue);

  /* Signal colors for market context */
  --signal-up:    var(--taa-green);       /* long / profit    */
  --signal-down:  #ff3b5c;                /* short / loss     */
  --signal-warn:  #ffb020;                /* drawdown / risk  */
  --signal-info:  var(--taa-blue-cyan);   /* notifications    */

  /* ============ GRADIENTS (from Manual page 4) ============ */
  --gradient-blue:  linear-gradient(90deg, #0078ff 0%, #00F2FE 100%);  /* Opción 1 */
  --gradient-green: linear-gradient(90deg, #00ff5d 0%, #009f5a 100%);  /* Opción 2 */
  --gradient-hero:  radial-gradient(ellipse at 30% 50%, rgba(0,120,255,.35) 0%, rgba(0,120,255,.06) 40%, rgba(13,13,13,1) 70%);
  --gradient-glow-blue:  radial-gradient(circle at center, rgba(0,120,255,.55) 0%, rgba(0,120,255,0) 60%);
  --gradient-glow-green: radial-gradient(circle at center, rgba(0,255,93,.45) 0%, rgba(0,255,93,0) 60%);

  /* ============ TYPE SCALE ============ */
  --font-display: 'Saira Condensed', 'Barlow Condensed', system-ui, sans-serif; /* Saira Condensed 800 — full diacritics support */
  --font-display-brand: 'Mortend', 'Saira Condensed', system-ui, sans-serif; /* legacy — only when NO accents, e.g. "TRADING ALGO ACADEMY" wordmark */
  --font-sans:    'Ruberoid', 'Saira', 'Inter', system-ui, sans-serif;                      /* real Ruberoid UltraLight + Saira fallback for weights ≥300 */
  --font-ultralight: 'Ruberoid', 'Saira', system-ui, sans-serif;                            /* explicit ultralight-only face */
  --font-mono:    'JetBrains Mono', 'Menlo', monospace;

  --fs-display-xl: clamp(56px, 7vw, 120px);  /* hero covers like "Manual de marca" */
  --fs-display-l:  clamp(44px, 5vw, 80px);
  --fs-display-m:  clamp(32px, 3.5vw, 56px);
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-l:     18px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-caption:    12px;
  --fs-micro:      11px;

  --lh-tight:   1.05;
  --lh-heading: 1.15;
  --lh-body:    1.5;
  --lh-loose:   1.7;

  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:   0;
  --ls-label:    0.08em;      /* small caps labels ("COLORES PRINCIPALES") */
  --ls-eyebrow:  0.16em;

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

  /* ============ RADII ============ */
  --radius-xs: 4px;
  --radius-s:  8px;
  --radius-m:  14px;
  --radius-l:  20px;   /* primary card radius seen in manual */
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* ============ BORDERS ============ */
  --stroke-1: 1px;
  --stroke-2: 1.5px;
  --stroke-3: 2px;

  /* ============ SHADOWS ============ */
  --shadow-card:     0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.6), 0 12px 32px rgba(0,0,0,.45);
  --shadow-pop:      0 2px 0 rgba(255,255,255,.04) inset, 0 20px 60px rgba(0,0,0,.55);
  --shadow-glow-blue:  0 0 0 1px rgba(0,120,255,.4), 0 10px 40px rgba(0,120,255,.35);
  --shadow-glow-green: 0 0 0 1px rgba(0,255,93,.4), 0 10px 40px rgba(0,255,93,.30);
  --shadow-inner-dark: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(0,0,0,.4);

  /* ============ MOTION ============ */
  --ease-out:   cubic-bezier(.2, .7, .2, 1);
  --ease-in:    cubic-bezier(.6, .05, .9, .3);
  --ease-inout: cubic-bezier(.6, .05, .2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   380ms;

  /* ============ GRID BG (brand texture) ============ */
  --grid-bg: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0/64px 64px,
             linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0/64px 64px;
}

/* ============ SEMANTIC ELEMENT DEFAULTS ============ */
html, body { background: var(--bg-0); color: var(--fg-1); font-family: var(--font-sans); }

.h-display { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-l); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); }
.h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); }
.h3 { font-family: var(--font-sans);    font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-heading); }
.h4 { font-family: var(--font-sans);    font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-heading); }
.p  { font-family: var(--font-sans);    font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); }
.caption { font-size: var(--fs-caption); color: var(--fg-3); letter-spacing: var(--ls-normal); }
.eyebrow { font-size: var(--fs-micro);   color: var(--fg-1); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); font-weight: 600; }
.label   { font-size: var(--fs-caption); color: var(--fg-2); text-transform: uppercase; letter-spacing: var(--ls-label);   font-weight: 600; }
.mono    { font-family: var(--font-mono); }

/* Highlight classes from manual (blue & green accents) */
.accent-blue  { color: var(--taa-blue); }
.accent-cyan  { color: var(--taa-blue-cyan); }
.accent-green { color: var(--taa-green); }
.grad-blue   { background: var(--gradient-blue);  -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-green  { background: var(--gradient-green); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Card primitives */
.taa-card {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}
.taa-card--glow-blue  { box-shadow: var(--shadow-card), var(--shadow-glow-blue); border-color: transparent; }
.taa-card--glow-green { box-shadow: var(--shadow-card), var(--shadow-glow-green); border-color: transparent; }

/* Blue accent tag used as slide title marker in the manual */
.taa-tag {
  display: inline-block;
  width: 64px; height: 28px;
  background: var(--taa-blue);
  border-radius: 2px;
  vertical-align: middle;
}