/* ============================================================
   Liftr Pro — Colors & Type tokens
   Source: Liftr Pro Swift design system (Colors, Typography,
   Spacing, Radius, Button styles), transcribed for HTML/CSS.
   ============================================================ */

/* ------------------------------------------------------------
   Fonts
   SF Pro is the iOS system face; on web we self-host SF Pro
   Display. Numeric values use JetBrains Mono (tabular).
   Upload the files to fonts/ — until then the fallback stacks
   in --font-sans / --font-mono render automatically.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'SF Pro Display';
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/SFProDisplay.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/JetBrainsMono.woff2') format('woff2');
}

/* -------- LIGHT MODE (default for mockups) -------- */
:root,
:root[data-theme="light"] {
  /* Surfaces */
  --ds-background:     #F7F7F7;
  --ds-surface:        #FFFFFF;
  --ds-surface-2:      #F0F0F0;
  --ds-border:         #E5E7EB;

  /* Brand — Forest Green */
  --ds-primary:        #4A7C59;
  --ds-primary-dim:    #D9E8DF;
  --ds-primary-muted:  #F0F5F2;
  --ds-on-primary:     #FFFFFF;

  /* Text */
  --ds-text-primary:   #111827;
  --ds-text-secondary: #6B7280;
  --ds-text-tertiary:  #9CA3AF;

  /* Semantic accents */
  --ds-yellow:         #D97706;
  --ds-red:            #DC2626;
  --ds-orange:         #EA580C;

  /* Pastels — used in charts and badges */
  --pastel-yellow:  rgb(249, 226, 124);
  --pastel-orange:  rgb(245, 162, 108);
  --pastel-pink:    rgb(232, 158, 199);
  --pastel-purple:  rgb(179, 154, 219);
  --pastel-blue:    rgb(156, 210, 227);
  --pastel-green:   rgb(168, 216, 141);

  /* Spacing */
  --space-xxs:  2px;
  --space-xs:   4px;
  --space-sm:   6px;
  --space-md:   8px;
  --space-lg:   12px;
  --space-xl:   16px;
  --space-xxl:  20px;
  --space-xxxl: 24px;

  /* Radius */
  --radius-xs:   8px;
  --radius-sm:   10px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-xl:   16px;
  --radius-xxl:  20px;
  --radius-card: 24px;

  /* Padding presets */
  --padding-screen:       16px;
  --padding-card:         18px;
  --padding-card-compact: 14px;

  /* Header shadow */
  --shadow-header: 0 3px 6px rgba(0, 0, 0, 0.06);

  /* Type stack — SF Pro on iOS, fallbacks for web mockups */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'SF Pro Text', 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
}

/* -------- DARK MODE (workout / dark screens) -------- */
:root[data-theme="dark"] {
  --ds-background:     #111714;
  --ds-surface:        #1A2220;
  --ds-surface-2:      #212E2A;
  --ds-border:         #2D3F3A;

  --ds-primary:        #4ADE80;
  --ds-primary-dim:    #2D5C42;
  --ds-primary-muted:  #1E3D2E;
  --ds-on-primary:     #0D1F18;

  --ds-text-primary:   #E8F0EC;
  --ds-text-secondary: #7A9488;
  --ds-text-tertiary:  #4A6458;

  --ds-yellow:         #FBBF24;
  --ds-red:            #F87171;
  --ds-orange:         #FB923C;
}

/* ============================================================
   Type — base + semantic styles
   Numbers (display*) use mono for tabular alignment.
   ============================================================ */
html, body { font-family: var(--font-sans); color: var(--ds-text-primary); }

/* Base type tokens */
.t-display-bold    { font: 700 28px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; }
.t-display-medium  { font: 500 28px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; }
.t-title           { font: 700 26px/1.2 var(--font-sans); }
.t-headline        { font: 700 22px/1.25 var(--font-sans); }
.t-section-label   { font: 700 12px/1.2 var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ds-primary); }
.t-button-large    { font: 700 16px/1.2 var(--font-sans); }
.t-body-large      { font: 600 15px/1.4 var(--font-sans); }
.t-body            { font: 500 14px/1.45 var(--font-sans); }
.t-body-small      { font: 600 13px/1.4 var(--font-sans); }
.t-caption         { font: 500 12px/1.35 var(--font-sans); letter-spacing: 0.5px; }
.t-label           { font: 500 11px/1.3 var(--font-sans); letter-spacing: 0.8px; }
.t-label-bold      { font: 600 11px/1.3 var(--font-sans); letter-spacing: 0.8px; }
.t-micro           { font: 600 10px/1.2 var(--font-sans); letter-spacing: 0.8px; }

/* Semantic — for prose and ad-hoc HTML */
h1, .h1 { font: 700 26px/1.2 var(--font-sans); margin: 0; }       /* title */
h2, .h2 { font: 700 22px/1.25 var(--font-sans); margin: 0; }      /* headline */
h3, .h3 { font: 700 12px/1.2 var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ds-primary); margin: 0; } /* sectionLabel */
p,  .p  { font: 500 14px/1.45 var(--font-sans); margin: 0; color: var(--ds-text-primary); }
small, .small { font: 500 12px/1.35 var(--font-sans); letter-spacing: 0.5px; color: var(--ds-text-secondary); }
code, .code   { font: 500 13px/1.4 var(--font-mono); }
.num, .stat   { font: 700 28px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; }