/* Design tokens — mirrors Tradebook/Utilities/Constants.swift */

:root {
  /* Brand */
  --tb-primary: #3882F5;
  --tb-primary-hover: #2C70DC;
  --tb-accent: #FA7324;
  --tb-success: #33C773;
  --tb-warning: #FFC208;
  --tb-danger: #F54236;

  /* Surfaces (light) */
  --tb-background: #FFFFFF;
  --tb-secondary-background: #F2F2F7;
  --tb-card: #F2F2F7;
  --tb-surface: #FFFFFF;

  /* Text (light) */
  --tb-text: #000000;
  --tb-secondary-text: rgba(60, 60, 67, 0.6);
  --tb-tertiary-text: rgba(60, 60, 67, 0.3);

  /* Separator */
  --tb-separator: rgba(60, 60, 67, 0.18);

  /* Spacing — TBSpacing */
  --tb-space-xs: 4px;
  --tb-space-sm: 8px;
  --tb-space-md: 12px;
  --tb-space-lg: 16px;
  --tb-space-xl: 20px;
  --tb-space-xxl: 24px;
  --tb-space-xxxl: 32px;

  /* Radius — TBRadius */
  --tb-radius-sm: 8px;
  --tb-radius-md: 12px;
  --tb-radius-lg: 16px;
  --tb-radius-xl: 20px;
  --tb-radius-pill: 999px;

  /* Typography */
  --tb-font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --tb-font-rounded: -apple-system-rounded, "SF Pro Rounded", "SF Pro Display", "Avenir Next", system-ui, sans-serif;

  --tb-size-display: 34px;
  --tb-size-title: 28px;
  --tb-size-title2: 22px;
  --tb-size-headline: 17px;
  --tb-size-body: 15px;
  --tb-size-caption: 13px;
  --tb-size-caption2: 11px;

  /* Shadow */
  --tb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  --tb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --tb-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Chrome */
  --tb-tabbar-height: 64px;
  --tb-header-height: 56px;
  --tb-max-width: 480px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tb-background: #000000;
    --tb-secondary-background: #1C1C1E;
    --tb-card: #1C1C1E;
    --tb-surface: #2C2C2E;

    --tb-text: #FFFFFF;
    --tb-secondary-text: rgba(235, 235, 245, 0.6);
    --tb-tertiary-text: rgba(235, 235, 245, 0.3);

    --tb-separator: rgba(84, 84, 88, 0.65);

    --tb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --tb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --tb-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  }
}