/* =========================================================
   Carpal Mockup — Design Tokens
   --cp-* : Reverted "Clean Premium" (cyan + amber + SF Pro)
   --ed-* : Editorial-kept (ink-gradient + Instrument Serif)
   ========================================================= */

:root {
  /* === Reverted: Cyan ramp === */
  --cp-cyan-50:  #D9EEFC;
  --cp-cyan-100: #B3DEF9;
  --cp-cyan-200: #8DCEF6;
  --cp-cyan-300: #66BEF3;
  --cp-cyan-400: #40C2F3;
  --cp-cyan-500: #00AEEF;   /* primary brand */
  --cp-cyan-600: #0094CB;
  --cp-cyan-700: #007AA7;
  --cp-cyan-800: #005C7E;
  --cp-cyan-900: #00455F;
  --cp-cyan: var(--cp-cyan-500);
  --cp-cyan-dark: var(--cp-cyan-600);

  /* === Reverted: Amber === */
  --cp-amber-400: #F9BB53;
  --cp-amber-500: #F5A623;
  --cp-amber-600: #D79019;
  --cp-amber-700: #B37815;
  --cp-amber: var(--cp-amber-500);

  /* === Semantic === */
  --cp-success: #34C759;
  --cp-error: #FF3B30;
  --cp-warning: #FF9500;
  --cp-info: var(--cp-cyan);

  /* === Text (iOS adaptive labels, light) === */
  --cp-text:           #0A1628;   /* neutral900, primary */
  --cp-text-secondary: #6A7485;   /* neutral600 */
  --cp-text-tertiary:  #A4ADBD;   /* neutral400 */
  --cp-text-disabled:  #C7CDD8;

  /* === Surfaces === */
  --cp-bg:           #F2F2F7;     /* systemGroupedBackground */
  --cp-bg-elevated:  #FFFFFF;
  --cp-surface:      #FFFFFF;
  --cp-surface-grad: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
  --cp-overlay-light: rgba(255, 255, 255, 0.92);
  --cp-overlay-dark:  rgba(0, 0, 0, 0.50);

  /* === Borders / hairlines === */
  --cp-separator: rgba(60, 60, 67, 0.12);
  --cp-hairline:  rgba(60, 60, 67, 0.18);
  --cp-border-soft: rgba(255, 255, 255, 0.6);

  /* === Shadows === */
  --cp-shadow-sm:  0 1px 4px rgba(10, 22, 40, 0.04);
  --cp-shadow-md:  0 2px 10px rgba(10, 22, 40, 0.08);
  --cp-shadow-lg:  0 4px 20px rgba(10, 22, 40, 0.12);
  --cp-shadow-fab: 0 6px 16px rgba(0, 174, 239, 0.30);
  --cp-shadow-card-glow: 0 8px 24px rgba(0, 174, 239, 0.18);

  /* === Radii === */
  --cp-r-xs: 4px;
  --cp-r-sm: 8px;
  --cp-r-md: 10px;
  --cp-r-lg: 12px;     /* buttons */
  --cp-r-xl: 16px;     /* cards */
  --cp-r-xxl: 24px;
  --cp-r-full: 9999px;
  --cp-radius-card: var(--cp-r-xl);
  --cp-radius-button: var(--cp-r-lg);

  /* === Spacing (4pt grid) === */
  --cp-s1:  4px;
  --cp-s2:  8px;
  --cp-s3:  12px;
  --cp-s4:  16px;
  --cp-s5:  20px;
  --cp-s6:  24px;
  --cp-s8:  32px;
  --cp-s10: 40px;
  --cp-s12: 48px;
  --cp-s16: 64px;

  /* === Gradients === */
  --cp-grad-primary: linear-gradient(180deg, #00AEEF 0%, #0094CB 100%);
  --cp-grad-bg:      linear-gradient(180deg, #F0F4F8 0%, #E8EDF2 50%, #F0F4F8 100%);
  --cp-grad-banner-1: linear-gradient(135deg, #00AEEF 0%, #007AA7 100%);
  --cp-grad-banner-2: linear-gradient(135deg, #0094CB 0%, #00455F 100%);
  --cp-grad-banner-3: linear-gradient(135deg, #40C2F3 0%, #0094CB 100%);
  --cp-grad-amber:   linear-gradient(135deg, #F9BB53 0%, #D79019 100%);

  /* === Typography === */
  --cp-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --cp-font-arabic: -apple-system, "SF Arabic", "Geeza Pro", "Tahoma", sans-serif;

  /* iOS text sizes */
  --cp-fs-display:   34px;
  --cp-fs-title1:    28px;
  --cp-fs-title2:    22px;
  --cp-fs-title3:    20px;
  --cp-fs-headline:  17px;
  --cp-fs-body:      17px;
  --cp-fs-callout:   16px;
  --cp-fs-subhead:   15px;
  --cp-fs-footnote:  13px;
  --cp-fs-caption:   12px;
  --cp-fs-caption2:  11px;

  /* === Editorial-kept tokens === */
  --ed-ink-900:  #0A1628;
  --ed-ink-800:  #1A2940;
  --ed-grad-ink: linear-gradient(135deg, #0A1628 0%, #1A2940 100%);
  --ed-electric:        #2E5BFF;
  --ed-electric-bright: #4D7BFF;
  --ed-rule-light: rgba(10, 22, 40, 0.12);
  --ed-paper-tint: #EEEAE2;
  --ed-font-display: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --ed-font-mono:    ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Code", Consolas, monospace;

  /* === Tab bar accent (resolved: cyan to match brand) === */
  --tab-accent:   var(--cp-cyan);
  --tab-inactive: #6A7485;

  /* === Phone frame (desktop only) === */
  --frame-width:  390px;
  --frame-height: 844px;
  --frame-radius: 50px;
  --frame-bezel:  12px;
  --frame-bg:     #F0F0F4;
}