/* =====================================================================
   DATATOROS — Colors & Type Foundations
   Brand: Datatoros (independent BI consultancy)
   ===================================================================== */

/* ---------- Webfonts ----------
   Display + Body: Roboto Condensed (variable TTF in fonts/).
   Mono: JetBrains Mono (variable WOFF2 in fonts/).
   No external font imports — system runs fully offline.
*/
@font-face {
  font-family: "Roboto Condensed";
  src: url("fonts/RobotoCondensed-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/RobotoCondensed-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2-variations"),
       url("fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== 1. RAW BRAND COLORS =========================================
     Pulled from the wordmark on the logo plate. Cyan is the single
     accent. Charcoal is the canonical "dark plate" background colour
     of the logo lockup.
  */
  --brand-cyan:        #5BE5FC;   /* exact pixel sample from logo */
  --brand-cyan-bright: #7CECFE;
  --brand-cyan-deep:   #1FA8C4;
  --brand-cyan-ink:    #0D5564;
  --brand-charcoal:    #0E1116;   /* logo plate dark */
  --brand-white:       #FFFFFF;

  /* ===== 2. NEUTRAL SCALE (charcoal / steel) =========================
     A 10-step neutral scale tuned so adjacent steps have visible
     separation on a monitor (~ΔL 5–8). Use ink for type, steel for
     surfaces.
  */
  --steel-25:  #F5F7FA;
  --steel-50:  #ECEFF3;
  --steel-100: #DDE3EA;
  --steel-200: #C2CAD3;
  --steel-300: #9BA5B1;
  --steel-400: #6E7889;
  --steel-500: #4A5363;
  --steel-600: #2F3744;
  --steel-700: #232A33;
  --steel-800: #161B22;
  --steel-900: #0E1116;
  --steel-950: #060A0F;

  /* ===== 3. SEMANTIC / DATA COLORS ===================================
     "Bull green" and "bear red" because we are a BI consultancy named
     after a bull market. These are also the canonical chart colors.
  */
  --bull-green:    #18C18C;
  --bull-green-tint: #103A30;
  --bear-red:      #FF5C5C;
  --bear-red-tint: #3A1A1F;
  --signal-amber:  #FFB547;
  --signal-amber-tint: #3A2A12;
  --signal-violet: #A78BFA;
  --signal-violet-tint: #221C3A;

  /* Chart categorical palette (8 hues, ordered) */
  --chart-1: #5BE5FC;  /* brand cyan */
  --chart-2: #18C18C;  /* bull green */
  --chart-3: #A78BFA;  /* violet */
  --chart-4: #FFB547;  /* amber */
  --chart-5: #FF7AB6;  /* pink */
  --chart-6: #FF5C5C;  /* bear red */
  --chart-7: #6E7889;  /* steel */
  --chart-8: #FFFFFF;  /* paper */
}

/* =====================================================================
   SEMANTIC TOKENS — dark theme (default; the brand is dark-first)
   ===================================================================== */
:root,
:root[data-theme="dark"] {
  /* Background layers (matte) */
  --bg-deep:     var(--steel-950);   /* page edge / app shell */
  --bg-base:     var(--steel-900);   /* canonical bg, matches logo */
  --bg-elevated: var(--steel-800);   /* sidebar, header */
  --bg-card:     #1A2029;            /* cards on bg-base */
  --bg-sunken:   var(--steel-950);   /* code blocks, inputs */
  --bg-hover:    rgba(255,255,255,0.04);
  --bg-press:    rgba(255,255,255,0.08);
  --bg-tint:     rgba(91, 229, 252, 0.08);  /* cyan tint */
  --bg-tint-strong: rgba(91, 229, 252, 0.16);

  /* Borders / dividers */
  --border:        #232A33;
  --border-strong: #2D3540;
  --border-faint:  rgba(255,255,255,0.06);
  --border-focus:  var(--brand-cyan);

  /* Foreground (text + glyphs) */
  --fg-1: #E6EDF3;   /* primary */
  --fg-2: #B1BAC4;   /* secondary */
  --fg-3: #8B949E;   /* tertiary / muted */
  --fg-4: #6E7889;   /* placeholder / disabled */
  --fg-bright: #FFFFFF;
  --fg-on-cyan: var(--steel-950);
  --fg-on-green: var(--steel-950);
  --fg-on-red: var(--brand-white);

  /* Accent */
  --accent: var(--brand-cyan);
  --accent-hover: var(--brand-cyan-bright);
  --accent-press: var(--brand-cyan-deep);
  --accent-ink: var(--steel-950);

  /* States */
  --success: var(--bull-green);
  --success-tint: var(--bull-green-tint);
  --danger:  var(--bear-red);
  --danger-tint: var(--bear-red-tint);
  --warning: var(--signal-amber);
  --warning-tint: var(--signal-amber-tint);
  --info: var(--brand-cyan);
  --info-tint: rgba(91, 229, 252, 0.12);

  /* Shadows (used sparingly on dark — mostly used in cards on light) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-glow: 0 0 24px rgba(91, 229, 252, 0.25);

  /* Gradients */
  --gradient-plate: linear-gradient(180deg, #0E1116 0%, #060A0F 100%);
  --gradient-cyan:  linear-gradient(135deg, #5BE5FC 0%, #1FA8C4 100%);
  --gradient-bull:  linear-gradient(135deg, #18C18C 0%, #0D5564 100%);
  --gradient-grid:  repeating-linear-gradient(
                      0deg,
                      rgba(255,255,255,0.03) 0 1px,
                      transparent 1px 32px
                    ),
                    repeating-linear-gradient(
                      90deg,
                      rgba(255,255,255,0.03) 0 1px,
                      transparent 1px 32px
                    );
}

/* ---------- Light theme (use sparingly — reports, printables) -------- */
:root[data-theme="light"] {
  --bg-deep:     var(--steel-50);
  --bg-base:     #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-card:     #FFFFFF;
  --bg-sunken:   var(--steel-25);
  --bg-hover:    rgba(14, 17, 22, 0.04);
  --bg-press:    rgba(14, 17, 22, 0.08);
  --bg-tint:     rgba(31, 168, 196, 0.08);
  --bg-tint-strong: rgba(31, 168, 196, 0.16);

  --border:        var(--steel-100);
  --border-strong: var(--steel-200);
  --border-faint:  rgba(14,17,22,0.06);
  --border-focus:  var(--brand-cyan-deep);

  --fg-1: var(--steel-900);
  --fg-2: var(--steel-600);
  --fg-3: var(--steel-500);
  --fg-4: var(--steel-400);
  --fg-bright: var(--steel-950);
  --fg-on-cyan: var(--steel-950);

  --accent: var(--brand-cyan-deep);
  --accent-hover: #178DA6;
  --accent-press: #0D5564;
  --accent-ink: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(14,17,22,0.05);
  --shadow-md: 0 4px 14px rgba(14,17,22,0.08), 0 0 0 1px var(--border);
  --shadow-lg: 0 12px 32px rgba(14,17,22,0.12), 0 0 0 1px var(--border);
  --shadow-glow: 0 0 24px rgba(31, 168, 196, 0.18);
}

/* =====================================================================
   TYPOGRAPHY
   ---------------------------------------------------------------------
   Display:  Roboto Condensed — supplied brand font (variable weight).
                                Used for headings, KPIs, eyebrows.
   Body:     Roboto Condensed — same family, lighter weights (400/500)
                                for paragraphs, table cells, UI copy.
   Mono:     JetBrains Mono — tabular numerals; ticker rows, code, KPIs.
   ===================================================================== */

:root {
  --font-display: "Roboto Condensed", "Saira Condensed", system-ui, sans-serif;
  --font-body:    "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo,
                  Consolas, monospace;

  /* Type scale (perfect-fourth-ish, tuned to 16px base) */
  --fs-hero:    72px;   --lh-hero:    1.02;   --tr-hero:    -0.025em;
  --fs-display: 56px;   --lh-display: 1.05;   --tr-display: -0.02em;
  --fs-h1:      40px;   --lh-h1:      1.10;   --tr-h1:      -0.015em;
  --fs-h2:      30px;   --lh-h2:      1.15;   --tr-h2:      -0.01em;
  --fs-h3:      22px;   --lh-h3:      1.25;   --tr-h3:      -0.005em;
  --fs-h4:      18px;   --lh-h4:      1.35;   --tr-h4:      0;
  --fs-body:    16px;   --lh-body:    1.55;   --tr-body:    0;
  --fs-small:   14px;   --lh-small:   1.5;    --tr-small:   0;
  --fs-caption: 12px;   --lh-caption: 1.45;   --tr-caption: 0.01em;
  --fs-eyebrow: 12px;   --lh-eyebrow: 1.2;    --tr-eyebrow: 0.14em;  /* UPPERCASE */
  --fs-kpi:     56px;   --lh-kpi:     1.0;    --tr-kpi:     -0.03em;

  /* Weights */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ====== SPACING ============================================== */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* ====== RADII ================================================
     Datatoros is "soft-cornered industrial" — small radii on data
     surfaces, never pill-y. Use --radius-pill only on chips/tags.
  */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   18px;
  --radius-pill: 999px;

  /* ====== MOTION =============================================== */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap:   cubic-bezier(0.5, 0, 0.1, 1);
  --dur-fast: 120ms;
  --dur-mid:  200ms;
  --dur-slow: 320ms;
}

/* =====================================================================
   SEMANTIC TYPE CLASSES
   ===================================================================== */

.dt-hero,
.dt-display,
.dt-h1, .dt-h2, .dt-h3, .dt-h4,
.dt-eyebrow,
.dt-kpi {
  font-family: var(--font-display);
}
.dt-body, .dt-small, .dt-caption {
  font-family: var(--font-body);
}
.dt-mono, .dt-ticker {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
}

.dt-hero {
  font-size: var(--fs-hero); line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero); font-weight: var(--fw-bold);
  color: var(--fg-bright);
}
.dt-display {
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--tr-display); font-weight: var(--fw-semi);
  color: var(--fg-bright);
}
.dt-h1 {
  font-size: var(--fs-h1); line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1); font-weight: var(--fw-semi);
  color: var(--fg-1);
}
.dt-h2 {
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2); font-weight: var(--fw-semi);
  color: var(--fg-1);
}
.dt-h3 {
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3); font-weight: var(--fw-semi);
  color: var(--fg-1);
}
.dt-h4 {
  font-size: var(--fs-h4); line-height: var(--lh-h4);
  letter-spacing: var(--tr-h4); font-weight: var(--fw-semi);
  color: var(--fg-1);
}
.dt-body {
  font-size: var(--fs-body); line-height: var(--lh-body);
  font-weight: var(--fw-regular); color: var(--fg-2);
}
.dt-small {
  font-size: var(--fs-small); line-height: var(--lh-small);
  font-weight: var(--fw-regular); color: var(--fg-2);
}
.dt-caption {
  font-size: var(--fs-caption); line-height: var(--lh-caption);
  font-weight: var(--fw-medium); color: var(--fg-3);
}
.dt-eyebrow {
  font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow);
  letter-spacing: var(--tr-eyebrow); font-weight: var(--fw-semi);
  text-transform: uppercase; color: var(--accent);
}
.dt-kpi {
  font-size: var(--fs-kpi); line-height: var(--lh-kpi);
  letter-spacing: var(--tr-kpi); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--fg-bright);
}

/* ---------- Plain HTML element baseline (optional) ------------------ */
.dt-prose {
  font-family: var(--font-body);
  color: var(--fg-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.dt-prose h1 { font-family: var(--font-display); font-size: var(--fs-h1);
                 line-height: var(--lh-h1); font-weight: var(--fw-semi);
                 color: var(--fg-1); margin: 0 0 var(--s-5); }
.dt-prose h2 { font-family: var(--font-display); font-size: var(--fs-h2);
                 line-height: var(--lh-h2); font-weight: var(--fw-semi);
                 color: var(--fg-1); margin: var(--s-8) 0 var(--s-4); }
.dt-prose h3 { font-family: var(--font-display); font-size: var(--fs-h3);
                 line-height: var(--lh-h3); font-weight: var(--fw-semi);
                 color: var(--fg-1); margin: var(--s-7) 0 var(--s-3); }
.dt-prose p  { margin: 0 0 var(--s-4); }
.dt-prose strong { color: var(--fg-1); font-weight: var(--fw-semi); }
.dt-prose code, .dt-prose pre {
  font-family: var(--font-mono); font-size: 0.92em;
  background: var(--bg-sunken); color: var(--fg-1);
  padding: 2px 6px; border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}
.dt-prose pre { padding: var(--s-4); overflow-x: auto; line-height: 1.5; }
.dt-prose a { color: var(--accent); text-decoration: none;
              border-bottom: 1px solid currentColor; }
.dt-prose a:hover { color: var(--accent-hover); }