/* ============================================================
   PowerUp Design System — colors_and_type.css
   Distilled type + color tokens with semantic aliases.
   For the full token set (spacing, radii, shadows, z-index,
   component sizes, animation), see: assets/tokens/powerup-tokens.css
   ============================================================ */

/* --- Fonts ---
   All three families are now self-hosted from fonts/.
   Barlow: static TTFs per weight.
   DM Sans + JetBrains Mono: variable TTFs (opsz/wght axes). */

/* Self-hosted Barlow — all weights, upright + italic */
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-Thin.ttf')             format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-ThinItalic.ttf')       format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-ExtraLight.ttf')       format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-Light.ttf')            format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-LightItalic.ttf')      format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-Regular.ttf')          format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-Italic.ttf')           format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-Medium.ttf')           format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-MediumItalic.ttf')     format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-SemiBold.ttf')         format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-SemiBoldItalic.ttf')   format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-Bold.ttf')             format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-BoldItalic.ttf')       format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-ExtraBold.ttf')        format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-ExtraBoldItalic.ttf')  format('truetype'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-Black.ttf')            format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('fonts/Barlow-BlackItalic.ttf')      format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

/* Self-hosted DM Sans — variable (opsz 9–40, wght 100–1000) */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

/* Self-hosted JetBrains Mono — variable (wght 100–800) */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Font families ---------- */
  --font-display: 'Barlow', 'Arial Narrow', sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', 'Fira Mono', monospace;

  /* ---------- Brand origin (extracted from logo, reference only) ---------- */
  --brand-orange-raw: #FF6B00;
  --brand-gray-raw:   #5C5C5C;

  /* ---------- Neutral ramp (light) ---------- */
  --neutral-0: #FFFFFF;  /* Surface White   */
  --neutral-1: #F4F4F2;  /* Cloud Gray      */
  --neutral-2: #ECEAE6;  /* Fog (row hover) */
  --neutral-3: #E0DFDB;  /* Divider         */
  --neutral-4: #B0AFA9;  /* Muted (border)  */
  --neutral-5: #8C8B86;  /* Slate (caption) */
  --neutral-6: #4A4A47;  /* Ink Secondary   */
  --neutral-7: #1A1A1A;  /* Ink Primary     */

  /* ---------- Orange family (light) ---------- */
  --orange-tint:  #FFF0E5;
  --orange-light: #FFD4B3;
  --orange:       #FF6B00;
  --orange-hover: #CC5500;
  --orange-press: #993D00;
  --orange-deep:  #661F00;

  /* ---------- Semantic (light) ---------- */
  --success:        #2E7D32;
  --success-bg:     #EAF3DE;
  --success-border: #C0DD97;

  --warning:        #B45309;
  --warning-bg:     #FFF3CD;
  --warning-border: #FAC775;

  --danger:         #C0392B;
  --danger-bg:      #FCEBEB;
  --danger-border:  #F7C1C1;

  --info:           #185FA5;
  --info-bg:        #E6F1FB;
  --info-border:    #B5D4F4;

  /* ---------- Data viz series (orange always = series 1) ---------- */
  --series-1: #FF6B00;
  --series-2: #1D6FA4;
  --series-3: #2E7D32;
  --series-4: #7B3FA0;
  --series-5: #B45309;
  --series-6: #5C5C5C;

  /* ---------- Semantic aliases (use these in code) ---------- */
  --bg-1:        var(--neutral-0);   /* page */
  --bg-2:        var(--neutral-1);   /* card / panel */
  --bg-3:        var(--neutral-2);   /* row hover */
  --bg-selection: var(--orange-tint);

  --border:        var(--neutral-3);
  --border-strong: var(--neutral-4);

  --fg-1: var(--neutral-7);   /* primary body + headings */
  --fg-2: var(--neutral-6);   /* secondary heading, label */
  --fg-3: var(--neutral-5);   /* caption, meta */
  --fg-4: var(--neutral-4);   /* disabled */
  --fg-link:       var(--orange-hover);
  --fg-link-hover: var(--orange-press);

  /* ---------- Type scale (semantic vars) ---------- */
  --h0-font: var(--font-display); --h0-size: 3.5rem;   --h0-weight: 800; --h0-lh: 1.05; --h0-ls: -0.02em;   /* Display 56 */
  --h1-font: var(--font-display); --h1-size: 2.5rem;   --h1-weight: 700; --h1-lh: 1.10; --h1-ls: -0.015em;  /* H1 40 */
  --h2-font: var(--font-display); --h2-size: 1.75rem;  --h2-weight: 600; --h2-lh: 1.20; --h2-ls: -0.01em;   /* H2 28 */
  --h3-font: var(--font-display); --h3-size: 1.25rem;  --h3-weight: 500; --h3-lh: 1.30; --h3-ls: -0.005em;  /* H3 20 */
  --h4-font: var(--font-body);    --h4-size: 1rem;     --h4-weight: 600; --h4-lh: 1.40; --h4-ls: 0;         /* H4 16 */

  --body-l-font: var(--font-body); --body-l-size: 1rem;    --body-l-weight: 400; --body-l-lh: 1.7;
  --body-m-font: var(--font-body); --body-m-size: 0.875rem;--body-m-weight: 400; --body-m-lh: 1.6;
  --label-font:  var(--font-body); --label-size: 0.75rem;  --label-weight: 500;  --label-lh: 1.4; --label-ls: 0.02em;
  --caption-font:var(--font-body); --caption-size: 0.6875rem; --caption-weight: 400; --caption-lh: 1.5;

  --kpi-font: var(--font-display); --kpi-size: 2.25rem; --kpi-weight: 800; --kpi-lh: 1; --kpi-ls: -0.02em;
  --kpi-l-font: var(--font-display); --kpi-l-size: 3rem; --kpi-l-weight: 800; --kpi-l-lh: 1; --kpi-l-ls: -0.025em;

  --mono-font: var(--font-mono); --mono-size: 0.8125rem; --mono-lh: 1.6;
  --mono-sm-font: var(--font-mono); --mono-sm-size: 0.6875rem; --mono-sm-lh: 1.5;
}

/* ============================================================
   Dark theme — toggled via [data-theme="dark"]
   ============================================================ */
[data-theme="dark"] {
  --neutral-0: #0D0D0D;
  --neutral-1: #1C1C1C;
  --neutral-2: #252525;
  --neutral-3: #2E2E2E;
  --neutral-4: #404040;
  --neutral-5: #6B6A65;
  --neutral-6: #A8A79F;
  --neutral-7: #F0EEEA;

  --orange-tint:  #261400;
  --orange-light: #4D2200;
  --orange:       #FF8533;
  --orange-hover: #FFB380;
  --orange-press: #FFD4B3;
  --orange-deep:  #FFE8CC;

  --success: #4CAF50; --success-bg: #0D2B0F; --success-border: #1A4D1C;
  --warning: #F59E0B; --warning-bg: #2B1A00; --warning-border: #4D3000;
  --danger:  #EF5350; --danger-bg:  #2B0A0A; --danger-border:  #4D1414;
  --info:    #5BA3D9; --info-bg:    #0A1A2B; --info-border:    #143047;

  --series-1: #FF8533;
  --series-2: #5BA3D9;
  --series-3: #66BB6A;
  --series-4: #AB7FCF;
  --series-5: #F59E0B;
  --series-6: #A8A79F;
}

/* ============================================================
   Base element styles — type system applied to native tags
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body {
  font-family: var(--body-l-font);
  font-size: var(--body-l-size);
  font-weight: var(--body-l-weight);
  line-height: var(--body-l-lh);
  color: var(--fg-1);
  background: var(--bg-1);
  margin: 0;
}

h1 { font-family: var(--h1-font); font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); margin: 0; }
h2 { font-family: var(--h2-font); font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); margin: 0; }
h3 { font-family: var(--h3-font); font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); margin: 0; }
h4 { font-family: var(--h4-font); font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-lh); margin: 0; }

p { font-family: var(--body-l-font); font-size: var(--body-l-size); line-height: var(--body-l-lh); margin: 0; }

code, kbd, pre, samp {
  font-family: var(--mono-font);
  font-size: var(--mono-size);
  line-height: var(--mono-lh);
}

a { color: var(--fg-link); text-decoration: none; }
a:hover { color: var(--fg-link-hover); text-decoration: underline; }

:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.18); border-radius: 8px; }

/* ============================================================
   Utility classes for the type roles (use when not on native tag)
   ============================================================ */
.t-display { font-family: var(--h0-font); font-size: var(--h0-size); font-weight: var(--h0-weight); line-height: var(--h0-lh); letter-spacing: var(--h0-ls); }
.t-h1      { font-family: var(--h1-font); font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); }
.t-h2      { font-family: var(--h2-font); font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); }
.t-h3      { font-family: var(--h3-font); font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); }
.t-h4      { font-family: var(--h4-font); font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-lh); }
.t-body-l  { font-family: var(--body-l-font); font-size: var(--body-l-size); font-weight: var(--body-l-weight); line-height: var(--body-l-lh); }
.t-body-m  { font-family: var(--body-m-font); font-size: var(--body-m-size); font-weight: var(--body-m-weight); line-height: var(--body-m-lh); }
.t-label   { font-family: var(--label-font); font-size: var(--label-size); font-weight: var(--label-weight); line-height: var(--label-lh); letter-spacing: var(--label-ls); }
.t-caption { font-family: var(--caption-font); font-size: var(--caption-size); font-weight: var(--caption-weight); line-height: var(--caption-lh); color: var(--fg-3); }
.t-kpi     { font-family: var(--kpi-font); font-size: var(--kpi-size); font-weight: var(--kpi-weight); line-height: var(--kpi-lh); letter-spacing: var(--kpi-ls); }
.t-kpi-l   { font-family: var(--kpi-l-font); font-size: var(--kpi-l-size); font-weight: var(--kpi-l-weight); line-height: var(--kpi-l-lh); letter-spacing: var(--kpi-l-ls); }
.t-mono    { font-family: var(--mono-font); font-size: var(--mono-size); line-height: var(--mono-lh); }
.t-mono-sm { font-family: var(--mono-sm-font); font-size: var(--mono-sm-size); line-height: var(--mono-sm-lh); }
.t-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 500;
  color: var(--fg-3);
}