/* ============================================================
   GOLIATHS DESIGN SYSTEM — Colors & Type
   Dark-mode first. Bloomberg-meets-Robinhood for European retail.
   Base tokens sourced from goliaths/src/theme (palette + text-variants).
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'DM Sans';
  font-weight: 400;
  src: url('fonts/DMSans-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  font-weight: 500;
  src: url('fonts/DMSans-Medium.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  font-weight: 700;
  src: url('fonts/DMSans-Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Body Text';
  font-weight: 700;
  src: url('fonts/BodyText-LargeBold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Body Text';
  font-weight: 800;
  src: url('fonts/BodyText-LargeExtraBold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'GT America Expanded';
  font-weight: 400;
  src: url('fonts/GTAmerica-ExpandedRegular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  font-weight: 400;
  src: url('fonts/WorkSans-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  font-weight: 700;
  src: url('fonts/WorkSans-Bold.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Mono';
  font-weight: 400;
  src: url('fonts/RobotoMono-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Mono';
  font-weight: 700;
  src: url('fonts/RobotoMono-Bold.ttf') format('truetype');
  font-display: swap;
}

/* ============================================================
   :root — dark-mode first tokens
   ============================================================ */
:root {
  /* ---------- Brand palette (from palette.ts) ---------- */
  --brand-blue:          #2B64F5;   /* primary — vivid action blue */
  --brand-blue-pale:     #507DF0;   /* ease / secondary blue */
  --brand-blue-dark:     #11143A;   /* deep navy — pro backgrounds */
  --brand-blue-ultra:    #11153D;   /* deepest navy */
  --brand-green:         #08A647;   /* gains / success */
  --brand-green-soft:    #0FA930;   /* secondary green */
  --brand-red:           #EB5757;   /* losses / danger */
  --brand-red-light:     #FDEEEE;
  --brand-yellow:        #F2CA51;   /* highlights */
  --brand-yellow-light:  #FEFAED;
  --brand-orange:        #F3A712;   /* premium */
  --brand-purple:        #A270FF;   /* playlist / copy-trading accent */

  /* ---------- Playlist accents (copy-trading / strategy colors) ---------- */
  --playlist-1: #A270FF;  /* violet  */
  --playlist-2: #F3A712;  /* amber   */
  --playlist-3: #3B28CC;  /* indigo  */
  --playlist-4: #FF3A20;  /* scarlet */
  --playlist-5: #9BC53D;  /* lime    */
  --playlist-6: #0EB1D2;  /* cyan    */

  /* ---------- Backgrounds — DARK MODE FIRST ---------- */
  --bg-base:         #0A0B12;  /* app chrome — deepest */
  --bg-surface:      #11143A;  /* primaryBold — navy surface */
  --bg-elevated:     #161935;  /* cards on surface */
  --bg-muted:        #1C1F3D;  /* tertiary rows */
  --bg-inverse:      #FFFFFF;  /* white panel on dark */
  --bg-primary:      #2B64F5;  /* brand CTA bg */
  --bg-success-soft: rgba(8,166,71,0.15);
  --bg-danger-soft:  rgba(235,87,87,0.15);
  --bg-warning-soft: rgba(242,202,81,0.15);
  --bg-gold-soft:    rgba(243,167,18,0.18);

  /* ---------- Foregrounds / Text ---------- */
  --fg1:             #FFFFFF;            /* primary text */
  --fg2:             #C7CDE0;            /* secondary text */
  --fg3:             #8B8FA7;            /* tertiary — past/muted */
  --fg4:             #525967;            /* quaternary — labels on dark */
  --fg-inverse:      #141414;            /* on light surface */
  --fg-primary:      #507DF0;            /* "easeText" — calm blue text */
  --fg-brand:        #2B64F5;            /* action text */
  --fg-success:      #15C75A;            /* green tuned brighter for dark */
  --fg-danger:       #EB5757;
  --fg-warning:      #F2CA51;

  /* ---------- Borders / dividers ---------- */
  --border-subtle:   rgba(255,255,255,0.06);
  --border-default:  rgba(255,255,255,0.12);
  --border-strong:   rgba(255,255,255,0.2);
  --border-on-light: #EEEEEE;

  /* ---------- Overlays & glass ---------- */
  --overlay-scrim:   rgba(10,11,18,0.72);
  --glass-fill:      rgba(255,255,255,0.04);
  --glass-stroke:    rgba(255,255,255,0.08);

  /* ---------- Radii (from border.ts) ---------- */
  --r-micro:  6px;
  --r-tiny:   8px;
  --r-mini:   12px;
  --r-small:  16px;
  --r-medium: 20px;
  --r-big:    22px;
  --r-round:  999px;

  /* ---------- Spacing (from spacing.ts) ---------- */
  --s-nano:  2px;
  --s-micro: 4px;
  --s-mimi:  6px;
  --s-tiny:  8px;
  --s-mini:  12px;
  --s-small: 16px;
  --s-intermediate: 20px;
  --s-medium: 24px;
  --s-big:    32px;
  --s-large:  40px;
  --s-huge:   64px;
  --s-immense: 90px;

  /* ---------- Shadows / elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  --shadow-glow-blue: 0 10px 40px rgba(43,100,245,0.35);
  --shadow-glow-green: 0 8px 28px rgba(8,166,71,0.3);
  --shadow-glow-gold: 0 8px 28px rgba(243,167,18,0.35);

  /* ---------- Gradients ---------- */
  --grad-navy:   linear-gradient(180deg, #161A45 0%, #0A0B12 100%);
  --grad-blue:   linear-gradient(135deg, #507DF0 0%, #2B64F5 100%);
  --grad-gold:   linear-gradient(135deg, #F2CA51 0%, #F3A712 100%);
  --grad-gain:   linear-gradient(180deg, rgba(8,166,71,0.25) 0%, rgba(8,166,71,0) 100%);
  --grad-loss:   linear-gradient(180deg, rgba(235,87,87,0.25) 0%, rgba(235,87,87,0) 100%);

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* ---------- Type — base families ---------- */
  --font-display: 'Body Text', 'Inter Tight', system-ui, -apple-system, sans-serif;  /* BodyText-LargeExtraBold — hero/display */
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;                   /* body — default */
  --font-label:   'GT America Expanded', 'Work Sans', sans-serif;                    /* uppercased labels/tabs */
  --font-info:    'Work Sans', system-ui, sans-serif;                                /* info, micro-copy */
  --font-mono:    'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;     /* numbers / tickers */

  /* ---------- Semantic type tokens (from text-variants.ts) ---------- */
  --t-big-title-size: 40px;
  --t-h1-size: 26px;
  --t-h2-size: 14px;
  --t-h3-size: 12px;
  --t-h4-size: 12px;
  --t-tab-size: 9px;
  --t-medium-title-size: 16px;
  --t-title-size: 12px;
  --t-body-big-size: 24px;
  --t-body-big-bold-size: 20px;
  --t-body-size: 16px;
  --t-body-bold-size: 16px;
  --t-normal-size: 14px;
  --t-normal-bold-size: 14px;
  --t-p-size: 12px;
  --t-body-small-size: 10px;
  --t-info-size: 12px;
  --t-caption-size: 16px;
  --t-small-bold-size: 10px;
  --t-tiny-bold-size: 8px;
}

/* ============================================================
   Semantic selectors — drop-in HTML rendering
   ============================================================ */
html, body {
  background: var(--bg-base);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.t-big-title, .t-bigtitle {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-big-title-size);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-h1-size);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2-size);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3-size);
  margin: 0;
}

.t-h4 {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: var(--t-h4-size);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.t-tab {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: var(--t-tab-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.t-medium-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-medium-title-size);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.t-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-title-size);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.t-body-big { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body-big-size); line-height: 1.3; }
.t-body-big-bold { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-body-big-bold-size); line-height: 1.25; }
.t-body, p { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body-size); line-height: 1.5; margin: 0; }
.t-body-bold { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-body-bold-size); }
.t-normal { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-normal-size); line-height: 1.45; }
.t-normal-bold { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-normal-bold-size); }
.t-p { font-family: var(--font-sans); font-weight: 500; font-size: var(--t-p-size); line-height: 1.45; }
.t-body-small { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body-small-size); }
.t-info { font-family: var(--font-info); font-weight: 400; font-size: var(--t-info-size); }
.t-caption { font-family: var(--font-info); font-weight: 400; font-size: var(--t-caption-size); }
.t-small-bold { font-family: var(--font-display); font-weight: 800; font-size: var(--t-small-bold-size); text-transform: uppercase; letter-spacing: 0.1em; }
.t-tiny-bold { font-family: var(--font-display); font-weight: 800; font-size: var(--t-tiny-bold-size); text-transform: uppercase; letter-spacing: 0.12em; }

code, .t-code { font-family: var(--font-mono); font-size: 14px; }
.t-code-bold { font-family: var(--font-mono); font-weight: 700; font-size: 14px; }

/* Financial number — tabular, never wraps */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.num-up   { color: var(--fg-success); }
.num-down { color: var(--fg-danger); }