/*
 * tokens.css — design-token system for multiprocess.ai.
 * Light values are the default in :root; dark values apply via
 * prefers-color-scheme AND an explicit [data-theme=dark] override.
 * [data-theme=light] forces light even when the OS prefers dark.
 */

:root {
  /* Color — light */
  --color-bg: #ffffff;
  --color-surface: #f7f7f8;
  --color-surface-raised: #ffffff;
  --color-border: #e3e3e6;
  --color-border-strong: #cfcfd4;
  --color-text: #1a1a1c;
  --color-text-secondary: #6b6b73;
  --color-accent: #10a37f;
  --color-accent-hover: #0d8c6d;
  --color-accent-contrast: #ffffff;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --leading-normal: 1.5;
  --leading-tight: 1.2;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* Layout */
  --measure: 48rem;
  --header-height: 3.5rem;

  /* Focus ring — used by :focus-visible across the app. */
  --color-focus: var(--color-accent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus) 40%, transparent);

  /* Skeleton loader shimmer base + highlight. */
  --skeleton-base: var(--color-surface-raised);
  --skeleton-shine: color-mix(in srgb, var(--color-text) 8%, transparent);

  /* Landing hero gradient wash (subtle, token-driven). */
  --gradient-hero:
    radial-gradient(60rem 40rem at 50% -10%,
      color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 70%);

  color-scheme: light;
}

/* Dark values — OS preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1a1a1c;
    --color-surface: #242427;
    --color-surface-raised: #2c2c30;
    --color-border: #3a3a3f;
    --color-border-strong: #4a4a51;
    --color-text: #ececed;
    --color-text-secondary: #a0a0a8;
    --color-accent: #10a37f;
    --color-accent-hover: #1fb893;
    --color-accent-contrast: #ffffff;
    --color-danger: #f87171;
    --color-danger-hover: #ef4444;

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

    color-scheme: dark;
  }
}

/* Dark values — explicit override (wins over OS light preference) */
:root[data-theme="dark"] {
  --color-bg: #1a1a1c;
  --color-surface: #242427;
  --color-surface-raised: #2c2c30;
  --color-border: #3a3a3f;
  --color-border-strong: #4a4a51;
  --color-text: #ececed;
  --color-text-secondary: #a0a0a8;
  --color-accent: #10a37f;
  --color-accent-hover: #1fb893;
  --color-accent-contrast: #ffffff;
  --color-danger: #f87171;
  --color-danger-hover: #ef4444;

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

  color-scheme: dark;
}