/*
 * shared/static/css/capxone-typography.css
 * =========================================
 * CapXone Design System — Typography Foundation
 *
 * Standardizes font usage across all 12 services. Drop-in import:
 *
 *   <link rel="stylesheet" href="/shared/static/css/capxone-typography.css">
 *
 * Or in a base.html <style> block:
 *   @import url('/shared/static/css/capxone-typography.css');
 *
 * Font stack:
 *   Display / headings:  Bebas Neue (always sans-serif fallback)
 *   Body / UI text:      Manrope (all services — replaces Syne/Rajdhani fragmentation)
 *   Monospace / data:    Azeret Mono
 *
 * Naming convention:
 *   .cx-*      → CapXone utility classes (prefixed to avoid collisions)
 *   --cx-*     → Design token CSS variables
 */

/* ═══════════════════════════════════════════════════════════
   0. FONT IMPORTS (single canonical source)
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@400;500;700;800&family=JetBrains+Mono:wght@300;400;500;600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');


/* ═══════════════════════════════════════════════════════════
   1. DESIGN TOKENS  (platform-unified stack 2026-04-18)
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Font families (canonical) ─────────────────────────── */
  --cx-font-display:  'Bebas Neue', 'Arial Narrow', sans-serif;
  --cx-font-body:     'DM Sans', -apple-system, sans-serif;
  --cx-font-mono:     'JetBrains Mono', 'Fira Code', monospace;
  --cx-font-accent:   'Roboto', 'DM Sans', sans-serif;

  /* ── Display scale (Bebas Neue) ────────────────────────── 
     Named by purpose, not arbitrary size numbers.
     Each step: ~1.25× ratio (major third scale)           */
  --cx-display-hero:   3rem;      /* 48px — landing hero, splash */
  --cx-display-page:   2rem;      /* 32px — page-level headings */
  --cx-display-section:1.5rem;    /* 24px — section headings */
  --cx-display-card:   1.15rem;   /* ~18px — card/panel titles */
  --cx-display-label:  0.9rem;    /* ~14px — strategy names, symbols */
  --cx-display-badge:  0.7rem;    /* ~11px — badges, small tags */

  /* ── Display letter-spacing (Bebas needs generous tracking) */
  --cx-ls-hero:    5px;
  --cx-ls-page:    4px;
  --cx-ls-section: 3px;
  --cx-ls-card:    2px;
  --cx-ls-label:   2px;
  --cx-ls-badge:   1.5px;

  /* ── Body scale (Manrope) ──────────────────────────────── */
  --cx-body-lg:    0.95rem;   /* 15px — large body text */
  --cx-body-md:    0.85rem;   /* ~14px — standard body */
  --cx-body-sm:    0.75rem;   /* 12px — secondary text */
  --cx-body-xs:    0.65rem;   /* ~10px — captions, fine print */

  /* ── Mono scale (Azeret Mono) ───────────────────────── */
  --cx-mono-lg:    0.75rem;   /* 12px — code blocks, main data */
  --cx-mono-md:    0.65rem;   /* ~10px — table data, timestamps */
  --cx-mono-sm:    0.56rem;   /* 9px  — labels, micro-badges */
  --cx-mono-xs:    0.48rem;   /* ~8px — status pills, tiny labels */

  /* ── KPI / numeric display (Bebas Neue for numbers) ────── */
  --cx-kpi-hero:   2.8rem;    /* giant dashboard number */
  --cx-kpi-lg:     1.7rem;    /* stat card value */
  --cx-kpi-md:     1.3rem;    /* inline KPI */
  --cx-kpi-sm:     1rem;      /* small metric */
  --cx-kpi-xs:     0.85rem;   /* mini badge value */

  /* ── Color aliases (service-agnostic) ──────────────────── 
     Maps to both screener (--g, --r, --c) and algoengine 
     (--green, --pink, --cyan) variable names.              */
  --cx-positive:   #00e676;   /* greens — up, profit, buy */
  --cx-negative:   #ff2d78;   /* reds — down, loss, sell */
  --cx-accent:     #00e5ff;   /* cyan — interactive, links */
  --cx-warning:    #ffe600;   /* yellow — alerts, paused */
  --cx-muted:      rgba(255,255,255,0.38);
  --cx-muted2:     rgba(255,255,255,0.18);
}

/* Light theme overrides */
[data-theme="light"] {
  --cx-muted:      rgba(0,0,0,0.50);
  --cx-muted2:     rgba(0,0,0,0.30);
}


/* ═══════════════════════════════════════════════════════════
   2. DISPLAY FONT UTILITIES (Bebas Neue)
   ═══════════════════════════════════════════════════════════
   Usage: <h1 class="cx-display-page">LIVE TRADING</h1>    */

.cx-display-hero {
  font-family: var(--cx-font-display);
  font-size: var(--cx-display-hero);
  letter-spacing: var(--cx-ls-hero);
  line-height: 1;
}
.cx-display-page {
  font-family: var(--cx-font-display);
  font-size: var(--cx-display-page);
  letter-spacing: var(--cx-ls-page);
  line-height: 1.1;
}
.cx-display-section {
  font-family: var(--cx-font-display);
  font-size: var(--cx-display-section);
  letter-spacing: var(--cx-ls-section);
  line-height: 1.1;
}
.cx-display-card {
  font-family: var(--cx-font-display);
  font-size: var(--cx-display-card);
  letter-spacing: var(--cx-ls-card);
  line-height: 1.15;
}
.cx-display-label {
  font-family: var(--cx-font-display);
  font-size: var(--cx-display-label);
  letter-spacing: var(--cx-ls-label);
  line-height: 1.2;
}
.cx-display-badge {
  font-family: var(--cx-font-display);
  font-size: var(--cx-display-badge);
  letter-spacing: var(--cx-ls-badge);
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════
   3. KPI / NUMERIC DISPLAY UTILITIES (Bebas Neue for values)
   ═══════════════════════════════════════════════════════════
   Usage: <span class="cx-kpi-lg">₹12,450</span>          */

.cx-kpi-hero {
  font-family: var(--cx-font-display);
  font-size: var(--cx-kpi-hero);
  letter-spacing: 1px;
  line-height: 1;
}
.cx-kpi-lg {
  font-family: var(--cx-font-display);
  font-size: var(--cx-kpi-lg);
  letter-spacing: 1px;
  line-height: 1;
}
.cx-kpi-md {
  font-family: var(--cx-font-display);
  font-size: var(--cx-kpi-md);
  letter-spacing: 1px;
  line-height: 1.1;
}
.cx-kpi-sm {
  font-family: var(--cx-font-display);
  font-size: var(--cx-kpi-sm);
  letter-spacing: 0.5px;
  line-height: 1.15;
}
.cx-kpi-xs {
  font-family: var(--cx-font-display);
  font-size: var(--cx-kpi-xs);
  letter-spacing: 0.5px;
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════
   4. MONOSPACE DATA UTILITIES (Azeret Mono)
   ═══════════════════════════════════════════════════════════
   Usage: <span class="cx-mono-md">09:15:23 IST</span>    */

.cx-mono-lg {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-mono-lg);
  font-weight: 400;
}
.cx-mono-md {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-mono-md);
  font-weight: 400;
}
.cx-mono-sm {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-mono-sm);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.cx-mono-xs {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-mono-xs);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   5. BODY TEXT UTILITIES (Manrope)
   ═══════════════════════════════════════════════════════════ */

.cx-body-lg {
  font-family: var(--cx-font-body);
  font-size: var(--cx-body-lg);
  line-height: 1.6;
}
.cx-body-md {
  font-family: var(--cx-font-body);
  font-size: var(--cx-body-md);
  line-height: 1.6;
}
.cx-body-sm {
  font-family: var(--cx-font-body);
  font-size: var(--cx-body-sm);
  line-height: 1.5;
}
.cx-body-xs {
  font-family: var(--cx-font-body);
  font-size: var(--cx-body-xs);
  line-height: 1.5;
  color: var(--cx-muted);
}

/* ═══════════════════════════════════════════════════════════
   6. SEMANTIC COMPONENT CLASSES
   ═══════════════════════════════════════════════════════════
   These map to actual UI patterns used repeatedly across
   the platform. Use instead of inline styles.              */

/* Panel header title (used 50+ times across services) */
.cx-panel-title {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-mono-sm);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cx-muted);
}

/* Strategy / instrument name on a card */
.cx-strat-name {
  font-family: var(--cx-font-display);
  font-size: var(--cx-display-card);
  letter-spacing: var(--cx-ls-card);
}

/* Symbol display (NIFTY, RELIANCE, etc.) */
.cx-symbol {
  font-family: var(--cx-font-display);
  font-size: var(--cx-display-label);
  letter-spacing: var(--cx-ls-label);
  color: var(--cx-accent);
}

/* LTP / live price — DM Sans + tabular nums (Zerodha-style alignment) */
.cx-price {
  font-family: var(--cx-font-body);
  font-size: var(--cx-kpi-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: 0;
}
.cx-price-lg {
  font-family: var(--cx-font-body);
  font-size: var(--cx-kpi-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: 0;
}

/* P&L value — DM Sans + tabular nums (auto-colors via modifier classes) */
.cx-pnl {
  font-family: var(--cx-font-body);
  font-size: var(--cx-kpi-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: 0;
}
.cx-pnl.positive, .cx-pnl.up   { color: var(--cx-positive); }
.cx-pnl.negative, .cx-pnl.down { color: var(--cx-negative); }

/* Change percentage badge */
.cx-change {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-mono-sm);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 2px;
}
.cx-change.up   { color: var(--cx-positive); background: rgba(0,230,118,.08); }
.cx-change.down { color: var(--cx-negative); background: rgba(255,45,120,.08); }

/* Stat strip cell (live stats bar) */
.cx-stat-label {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-mono-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cx-muted2);
  margin-bottom: 6px;
}
.cx-stat-value {
  font-family: var(--cx-font-display);
  font-size: var(--cx-kpi-lg);
  letter-spacing: 1px;
}
.cx-stat-sub {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-mono-sm);
  color: var(--cx-muted2);
  margin-top: 3px;
}

/* Button text */
.cx-btn-text {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-mono-sm);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Logo */
.cx-logo {
  font-family: var(--cx-font-display);
  font-size: 1.55rem;
  letter-spacing: 4px;
}
.cx-logo-sub {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-mono-sm);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cx-accent);
}

/* Sidebar nav item */
.cx-nav-item {
  font-family: var(--cx-font-mono);
  font-size: 0.7rem;
  letter-spacing: 1px;
}
.cx-nav-section {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-mono-sm);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cx-muted2);
}

/* Table header */
.cx-th {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-mono-xs);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cx-muted2);
}

/* Table data cell — DM Sans with tabular nums so digits align like Zerodha */
.cx-td {
  font-family: var(--cx-font-body);
  font-size: var(--cx-body-sm);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ── Numeric utility — drop on any cell / span carrying a number ─────
   Use like: <td class="cx-tnum">1,234.56</td>
   Preserves the surrounding font but forces aligned (tabular) digits. */
.cx-tnum,
.num, td.num, td.right,
.cx-num, .cx-price, .cx-price-lg, .cx-pnl,
.cx-kpi-value, .cx-kpi-hero, .cx-stat-value,
.cx-change, .cx-td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Tooltip / crosshair label */
.cx-tooltip {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-mono-sm);
  line-height: 1.6;
}

/* Blur gate / paywall overlay title */
.cx-gate-title {
  font-family: var(--cx-font-display);
  font-size: var(--cx-display-section);
  letter-spacing: var(--cx-ls-section);
  text-align: center;
}

/* Empty state message */
.cx-empty-title {
  font-family: var(--cx-font-display);
  font-size: var(--cx-display-card);
  letter-spacing: var(--cx-ls-card);
  color: var(--cx-muted2);
}
.cx-empty-desc {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-mono-md);
  color: var(--cx-muted2);
}


/* ═══════════════════════════════════════════════════════════
   7. RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --cx-display-hero:    2.2rem;
    --cx-display-page:    1.5rem;
    --cx-display-section: 1.2rem;
    --cx-display-card:    1rem;
    --cx-kpi-hero:        2rem;
    --cx-kpi-lg:          1.4rem;
    --cx-kpi-md:          1.1rem;
  }
}

@media (max-width: 480px) {
  :root {
    --cx-display-hero:    1.8rem;
    --cx-display-page:    1.3rem;
    --cx-display-section: 1.1rem;
    --cx-kpi-hero:        1.7rem;
    --cx-kpi-lg:          1.2rem;
  }
}