/* ─────────────────────────────────────────────────────────────────
   Drais Design System — Colors & Type
   "Kinetic Calm" — premium sports-tech, pure dark, orange accent
   Sharp geometry (0px corners). DM Sans throughout.
   ───────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Variable.ttf') format('truetype-variations'),
       url('fonts/DMSans-Variable.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand (theme-independent) ─────────────────────────────── */
  --primary: #FF6B35;
  --primary-dim: #E65F2F;
  --primary-pressed: #CC5529;
  --on-primary: #FFFFFF;

  /* ── Semantic ──────────────────────────────────────────────── */
  --accent: #3D8B37;           /* success */
  --warning: #F59E0B;
  --danger: #EF4444;
  --danger-strong: #DC2626;
  --cyan: #22D3EE;
  --accent-bright: #00FF85;    /* insights-only */
  --attention: #FFB800;

  /* Tinted backgrounds (semi-transparent; work on any base) */
  --primary-bg: rgba(255,107,53,0.10);
  --green-bg:   rgba(61,139,55,0.12);
  --yellow-bg:  rgba(245,158,11,0.12);
  --red-bg:     rgba(239,68,68,0.12);
  --orange-bg:  rgba(249,115,22,0.12);
  --violet-bg:  rgba(139,92,246,0.12);

  /* Ride types */
  --ride-gravel: #8B6914;
  --ride-ebike:  #6366F1;
  --ride-social: #059669;
  --ride-training: #DC2626;

  /* Chart palette extras */
  --violet: #8B5CF6;
  --orange: #F97316;
  --slate:  #9DA7BB;

  /* Presence */
  --online:  #22C55E;
  --offline: #9CA3AF;

  /* External brands */
  --tracker: #FC4C02;
  --tracker-secondary: #1A8FDF;
  --tracker-accent:  #00B4FF;

  /* ── Typography families ────────────────────────────────────── */
  --font-display: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'DM Sans', ui-sans-serif, system-ui, sans-serif;

  /* ── Spacing (4pt grid) ─────────────────────────────────────── */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-xxl: 32px;
  --space-xxxl: 48px;
  --space-section: 64px;
  --screen-h: 20px;

  /* ── Radius (sharp geometry) ────────────────────────────────── */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-xxl: 0px;
  --radius-pill: 999px;
  --radius-full: 999px;

  /* ── Motion ─────────────────────────────────────────────────── */
  --motion-fast:   300ms;
  --motion-normal: 400ms;
  --motion-slow:   600ms;
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --ease-enter:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit:     cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Dark theme (primary) — Pure Dark ──────────────────────────── */
:root,
[data-theme='dark'] {
  --bg: #0A0A0A;
  --surface: #111111;
  --surface-deep: #0A0A0A;
  --card: #111111;
  --card-hover: #1A1A1A;
  --surface-raised: #161616;
  --surface-overlay: #0A0A0A;
  --surface-pressed: #1A1A1A;

  --text:           #FFFFFF;
  --text-secondary: #888888;
  --text-muted:     #666666;

  --border:         #222222;
  --border-subtle:  #1A1A1A;
  --border-strong:  #333333;
  --divider:        #1C1C1C;

  --accent-primary-soft:    rgba(255,107,53,0.10);
  --accent-primary-pressed: #CC5529;
}

/* ── Light theme — Neutral White ───────────────────────────────── */
[data-theme='light'] {
  --bg: #F5F5F5;
  --surface: #FAFAFA;
  --surface-deep: #EEEEEE;
  --card: #FFFFFF;
  --card-hover: #F0F0F0;
  --surface-raised: #FFFFFF;
  --surface-overlay: #F0F0F0;
  --surface-pressed: #E5E5E5;

  --text:           #0A0A0A;
  --text-secondary: #666666;
  --text-muted:     #999999;

  --border:         #D4D4D4;
  --border-subtle:  #E0E0E0;
  --border-strong:  #BBBBBB;
  --divider:        #DDDDDD;

  --accent-primary-soft:    rgba(255,107,53,0.10);
  --accent-primary-pressed: #FFE0D0;
}

/* ─────────────────────────────────────────────────────────────────
   Semantic type styles — DM Sans geometric sans-serif scale
   ───────────────────────────────────────────────────────────────── */

html, body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-hero {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -1.68px; /* -0.03em */
  line-height: 1.05;
}

.t-display {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.8px; /* -0.02em */
  line-height: 1.1;
}

.t-headline, h1, h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.48px;
  line-height: 1.1;
}

.t-section-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.26px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.t-card-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  line-height: 1.25;
}

.t-title-lg { font-size: 20px; font-weight: 600; line-height: 1.2; }
.t-title-md { font-size: 16px; font-weight: 600; line-height: 1.25; }
.t-title-sm { font-size: 14px; font-weight: 500; line-height: 1.25; }

.t-body-lg { font-size: 17px; font-weight: 400; line-height: 1.5; }
.t-body-md { font-size: 15px; font-weight: 400; line-height: 1.5; }
.t-body-sm { font-size: 14px; font-weight: 400; line-height: 1.5; }

.t-label-lg { font-size: 14px; font-weight: 600; line-height: 1.2; }
.t-label-md { font-size: 13px; font-weight: 600; line-height: 1.2; }
.t-label-sm { font-size: 11px; font-weight: 500; line-height: 1.2; }

.t-caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-secondary);
}

.t-micro {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

/* Tabular numerals for metrics/stats */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }