/* tokens.css — design tokens. Apple iOS-style palette + scale.
 * All other stylesheets reference these via var(...). Never hardcode.
 * Source of truth: PHASE_1_4_SPEC.md §4. */

:root {
  /* Color — text */
  --color-text-primary:   #1D1D1F;
  --color-text-secondary: #6E6E73;
  --color-text-tertiary:  #8E8E93;
  --color-text-on-accent: #FFFFFF;
  --color-text-link:      #007AFF;

  /* Color — surface */
  --color-bg-base:        #F2F2F7;
  --color-bg-surface:     #FFFFFF;
  --color-bg-grouped:     #FFFFFF;
  --color-bg-input:       #FFFFFF;
  --color-bg-elevated:    #FFFFFF;

  /* Color — accent */
  --color-accent:         #007AFF;
  --color-accent-hover:   #0066D6;
  --color-accent-active:  #0051A8;
  --color-accent-bg:      #E5F1FF;

  /* Color — status */
  --color-success:        #34C759;
  --color-success-bg:     #E8F8EC;
  --color-warning:        #FF9500;
  --color-warning-bg:     #FFF4E5;
  --color-danger:         #FF3B30;
  --color-danger-bg:      #FFEBEA;
  --color-pending:        #8E8E93;
  --color-pending-bg:     #F2F2F7;

  /* Color — border */
  --color-border:         rgba(60, 60, 67, 0.12);
  --color-border-strong:  rgba(60, 60, 67, 0.24);
  --color-border-focus:   #007AFF;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --font-size-caption-2: 11px;
  --font-size-caption-1: 12px;
  --font-size-footnote:  13px;
  --font-size-subhead:   15px;
  --font-size-callout:   16px;
  --font-size-body:      17px;
  --font-size-headline:  17px;
  --font-size-title-3:   20px;
  --font-size-title-2:   22px;
  --font-size-title-1:   28px;
  --font-size-large:     34px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  --line-height-tight:   1.2;
  --line-height-normal:  1.4;
  --line-height-relaxed: 1.5;

  /* Spacing — 4px grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Border radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* Shadow — used sparingly */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;
  --easing:          cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --content-max-width: 1200px;
  --sidebar-width:     240px;
  --tab-bar-height:    56px;
  --top-bar-height:    56px;
  --touch-target:      44px;
}