/* Replr design tokens — mirrored verbatim from Shared/ReplrTheme.swift + DESIGN.md.
   Source of truth stays ReplrTheme.swift; keep this in sync if tokens change.
   Light is the default; dark via prefers-color-scheme. */

:root {
  /* Surfaces — light */
  --bg: #FFF8F5;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;

  /* Accent — deeper rose on light for AA contrast */
  --accent: #E8447A;
  --on-accent: #FFFFFF;
  --accent-soft: rgba(232, 68, 122, 0.12);
  --accent-subtle: rgba(232, 68, 122, 0.18);
  --accent-glow: rgba(232, 68, 122, 0.22);

  /* Text — maps iOS semantic labels */
  --text-primary: #1C1622;
  --text-secondary: rgba(28, 22, 34, 0.60);
  --text-tertiary: rgba(28, 22, 34, 0.40);

  /* Borders */
  --glass-border: rgba(0, 0, 0, 0.08);

  /* Placeholder/mock skeleton fills (dummy visuals — replaced with real shots later) */
  --mock-fill: rgba(28, 22, 34, 0.06);
  --mock-line: rgba(28, 22, 34, 0.10);

  /* Brand gradient — constant in both modes (rose -> coral -> amber) */
  --grad: linear-gradient(135deg, #FF5E8A 0%, #FF7A59 55%, #FFB45E 100%);
  --amber: #FFB45E;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-card: 18px;
  --r-full: 999px;

  /* Spacing — 4pt grid */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 20px;
  --s-xxl: 24px;
  --s-3xl: 32px;
  --s-4xl: 40px;
  --s-5xl: 56px;
  --s-6xl: 72px;
  --screen-margin: 24px;

  /* Type */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

  /* Motion */
  --motion-quick: 150ms ease-out;
  --motion-standard: 220ms ease-in-out;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15101A;
    --surface: #211826;
    --surface-raised: #2D2032;

    --accent: #FF6F91;
    --accent-soft: rgba(255, 111, 145, 0.12);
    --accent-subtle: rgba(255, 111, 145, 0.15);
    --accent-glow: rgba(255, 111, 145, 0.42);

    --text-primary: #F5EEF4;
    --text-secondary: rgba(245, 238, 244, 0.62);
    --text-tertiary: rgba(245, 238, 244, 0.38);

    --glass-border: rgba(255, 255, 255, 0.10);
    --mock-fill: rgba(255, 255, 255, 0.06);
    --mock-line: rgba(255, 255, 255, 0.10);

    color-scheme: dark;
  }
}