/* CourtOracle Design System Tokens — Exact iOS Match */
/* Source: tennis_journal/tennis_journal/Design/Colors.swift + Typography.swift */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,700;0,800;1,400;1,500&display=swap');

:root {
  /* ─── Colors (from Colors.swift RGB values) ─── */
  --tj-background: #F7F7FA;
  --tj-foreground: #2D2D2D;
  --tj-primary: #D97706;
  --tj-primary-dark: #B45309;
  --tj-primary-foreground: #FFFFFF;
  --tj-card: #FAFAF9;
  --tj-card-foreground: #2D2D2D;
  --tj-secondary: #F0F0F3;
  --tj-secondary-foreground: #2D2D2D;
  --tj-muted: #EBEBF0;
  --tj-muted-foreground: #666666;
  --tj-border: #D4D4D6;
  --tj-input: #EBEBF0;
  --tj-destructive: #D93530;
  --tj-destructive-foreground: #FFFFFF;
  --tj-win: #D97706;
  --tj-loss: #666666;
  --tj-court-line: #DCDCDF;
  --tj-marker-black: #1A1A1A;
  --tj-marker-orange: #D97706;
  --tj-marker-gray: #808080;

  /* ─── Typography (from Typography.swift) ─── */
  /* Kaden 2026-04-23: every token scaled by 1.1 so that what looked correct
     at browser 110% zoom is now the default 100% baseline. No inline px in
     component code needs to change — the tokens are the single source of
     size, and raising them propagates through every style that references
     them. Values rounded to whole pixels for crisp rendering. */
  --font-serif: 'EB Garamond', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Display (scaled from 48 / 36 / 60) */
  --text-display-lg: 53px;
  --text-display-md: 40px;
  --text-display-stats: 66px;

  /* Headings (scaled from 30 / 20 / 18) */
  --text-heading-lg: 33px;
  --text-heading-md: 22px;
  --text-heading-sm: 20px;

  /* Body (scaled from 16 / 14) */
  --text-body: 18px;
  --text-body-sm: 15px;

  /* Labels (scaled from 12 / 10) */
  --text-label: 13px;
  --text-label-tiny: 11px;

  /* Font weights (EB Garamond) */
  --weight-regular: 500;
  --weight-bold: 800;
  --weight-italic: 500;

  /* Letter spacing (from kerning values in iOS) */
  --tracking-display: 0.04em;
  --tracking-heading: 0.06em;
  --tracking-body: 0.03em;
  --tracking-label: 0.25em;
  --tracking-section: 0.2em;
  --tracking-category: 0.15em;

  /* Line height */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ─── Spacing (from iOS 4pt base unit, scaled for desktop, ×1.1) ─── */
  /* The smallest gap (space-1 = 4px) stays at 4 — below 4 there's nothing
     smaller to render cleanly. Everything else moves up 10%. */
  --space-1: 4px;
  --space-2: 9px;
  --space-3: 13px;
  --space-4: 18px;
  --space-5: 22px;
  --space-6: 26px;
  --space-8: 35px;
  --space-10: 44px;
  --space-12: 53px;
  --space-16: 70px;

  /* ─── Border Radius (×1.1) ─── */
  --radius-xs: 4px;
  --radius-sm: 9px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 31px;
  --radius-full: 9999px;

  /* ─── Shadows (subtle, iOS-aligned) ─── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(23, 23, 25, 0.04);
  --shadow-lg: 0 8px 24px rgba(23, 23, 25, 0.06);

  /* ─── Transitions ─── */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* ─── Layout (×1.1, rounded) ─── */
  --sidebar-width: 264px;
  /* Bumped from 880 → 1280 (2026-04-23, Kaden second pass). The previous
     padding-multiplier reduction tightened padding INSIDE the content box
     but the centering math kept max-width the same, so the visible gap
     between sidebar and content barely shrank. Raising max-width directly
     is the actual knob for "more content, less margin" — at 1600 viewport
     the sidebar→content gap drops from ~216px to ~27px. Centering still
     applies on ultra-wide (>1700) screens to cap over-wide line lengths. */
  --content-max: 1280px;
  --video-panel-width: 440px;
  --header-height: 70px;
  --footer-min-height: 220px;
}