/* ==========================================================================
   Design Tokens
   Palette inspired by Stripe Checkout/Dashboard, refined with Apple HIG
   spacing/typography rhythm and Material elevation. Every color, radius,
   spacing and shadow value used anywhere in this app flows from here.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --color-primary: #635bff;
  --color-primary-hover: #524adb;
  --color-primary-active: #453fc0;
  --color-primary-soft: #eeedff;
  --color-on-primary: #ffffff;

  /* ---- Semantic ---- */
  --color-success: #12805c;
  --color-success-soft: #e3f8ef;
  --color-danger: #df1b41;
  --color-danger-soft: #fde8ec;
  --color-warning: #b45400;
  --color-warning-soft: #fff2df;
  --color-info: #0a5cd8;
  --color-info-soft: #e6f0ff;

  /* ---- Surfaces (light) ---- */
  --bg-app: #f6f7fb;
  --bg-elevated: #ffffff;
  --bg-secondary: #f0f1f6;
  --bg-overlay: rgba(20, 22, 37, 0.48);
  --bg-skeleton: #e8e9f0;

  /* ---- Text (light) ---- */
  --text-primary: #1a1f36;
  --text-secondary: #4f5566;
  --text-tertiary: #8792a2;
  --text-disabled: #b4bac6;

  /* ---- Borders (light) ---- */
  --border-color: #e3e6ed;
  --border-color-strong: #c7cbd6;

  /* ---- Shadows (light) ---- */
  --shadow-xs: 0 1px 2px rgba(20, 22, 37, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 22, 37, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 22, 37, 0.10);
  --shadow-lg: 0 16px 40px rgba(20, 22, 37, 0.16);
  --shadow-primary: 0 8px 20px rgba(99, 91, 255, 0.28);

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.375rem;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

  /* ---- Layout ---- */
  --app-max-width: 480px;
  --header-height: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

/* ---- Dark theme: system preference ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-app: #0e0f18;
    --bg-elevated: #191b28;
    --bg-secondary: #20222f;
    --bg-overlay: rgba(4, 5, 10, 0.64);
    --bg-skeleton: #262838;

    --text-primary: #f3f4f8;
    --text-secondary: #a9adc1;
    --text-tertiary: #767c92;
    --text-disabled: #4a4e60;

    --border-color: #2a2d3d;
    --border-color-strong: #3a3e52;

    --color-primary-soft: #2a2760;
    --color-success-soft: #103524;
    --color-danger-soft: #3a121c;
    --color-warning-soft: #3a2708;
    --color-info-soft: #0e2444;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-primary: 0 8px 24px rgba(99, 91, 255, 0.38);

    color-scheme: dark;
  }
}

/* ---- Dark theme: explicit user toggle (overrides system preference) ---- */
:root[data-theme="dark"] {
  --bg-app: #0e0f18;
  --bg-elevated: #191b28;
  --bg-secondary: #20222f;
  --bg-overlay: rgba(4, 5, 10, 0.64);
  --bg-skeleton: #262838;

  --text-primary: #f3f4f8;
  --text-secondary: #a9adc1;
  --text-tertiary: #767c92;
  --text-disabled: #4a4e60;

  --border-color: #2a2d3d;
  --border-color-strong: #3a3e52;

  --color-primary-soft: #2a2760;
  --color-success-soft: #103524;
  --color-danger-soft: #3a121c;
  --color-warning-soft: #3a2708;
  --color-info-soft: #0e2444;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-primary: 0 8px 24px rgba(99, 91, 255, 0.38);

  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}