/*
 * tokens.css — design-token system for multiprocess.ai.
 * Aligned to docs/design-brief.md (2026-07 research synthesis).
 * 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.
 *
 * Grammar (see agents.md "Design guidelines"):
 *   type: 6 sizes (xs/sm/base/lg/xl/display), weights 400/500/600 only.
 *   space: 4px scale only. radius: sm6 / md10 / lg16 / full. shadow: sm + md.
 *   motion: fast/base/med + ease-out. color: neutrals + one accent hue.
 */

:root {
  /* --- Color — light (warm neutrals) ------------------------------------- */
  --color-bg: #faf9f7;
  --color-bg-sidebar: #f4f3f1;
  --color-surface: #f0efed;
  --color-surface-raised: #ffffff;
  --color-border: #e4e4e2;
  --color-border-strong: #d4d3cf;
  --color-text: #1a1a1a;            /* never pure black */
  --color-text-secondary: #5c5c66;  /* muted — AA (≥4.5:1) on every surface */
  --color-accent: #6e56cf;          /* fills (buttons, avatars) */
  --color-accent-hover: #5b47b3;
  --color-accent-text: #5b47b3;     /* accent AS TEXT — AA on surfaces */
  --color-accent-contrast: #ffffff;
  --color-danger: #c62828;
  --color-danger-hover: #991b1b;

  /* --- Typography — 6 sizes max, weights 400/500/600 --------------------- */
  --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;     /* 12 / 16 */
  --text-sm: 0.875rem;    /* 14 / 20 */
  --text-base: 1rem;      /* 16 / 24 */
  --text-lg: 1.125rem;    /* 18 / 28  w600 */
  --text-xl: 1.5rem;      /* 24 / 32  w600 */
  --text-display: 2rem;   /* 32 / 38  w600 — one per screen */
  /* Back-compat aliases (map onto the 6-size scale). */
  --text-2xl: var(--text-display);
  --text-3xl: var(--text-display);

  --leading-xs: 1.333;
  --leading-normal: 1.5;
  --leading-tight: 1.2;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* --- Spacing — 4px scale only ----------------------------------------- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-10: 4rem;     /* 64 */

  /* --- Radii — sm/md/lg/full only --------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  /* Back-compat alias: xl folds into lg (largest allowed radius). */
  --radius-xl: var(--radius-lg);

  /* --- Shadows — two only; floating layers only ------------------------- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.12), 0 1px 3px rgb(0 0 0 / 0.08);
  /* Back-compat alias: lg folds into md (deepest allowed elevation). */
  --shadow-lg: var(--shadow-md);

  /* --- Motion ----------------------------------------------------------- */
  --dur-fast: 100ms;    /* hover / focus */
  --dur-base: 150ms;    /* fades / menus */
  --dur-med: 220ms;     /* sidebar / modals */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);   /* entrances */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);    /* exits (faster) */

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

  /* Focus ring — used by :focus-visible across the app (≥3:1 both themes). */
  --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);
  --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 palette shared by OS-preference and explicit override. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #212121;
    --color-bg-sidebar: #171717;
    --color-surface: #2d2d2d;
    --color-surface-raised: #353538;   /* elevation = lighter surface + border */
    --color-border: #3a3a3a;
    --color-border-strong: #4a4a48;
    --color-text: #ececec;             /* never pure white */
    --color-text-secondary: #b4b4bd;   /* muted — AA on every dark surface */
    --color-accent: #9d8df1;
    --color-accent-hover: #b3a7f5;
    --color-accent-text: #b3a7f5;      /* lightened + desaturated for dark */
    --color-accent-contrast: #ffffff;
    --color-danger: #f87171;
    --color-danger-hover: #ef4444;

    /* Dark elevation leans on surface + border; shadows stay subtle. */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.3);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: #212121;
  --color-bg-sidebar: #171717;
  --color-surface: #2d2d2d;
  --color-surface-raised: #353538;
  --color-border: #3a3a3a;
  --color-border-strong: #4a4a48;
  --color-text: #ececec;
  --color-text-secondary: #b4b4bd;
  --color-accent: #9d8df1;
  --color-accent-hover: #b3a7f5;
  --color-accent-text: #b3a7f5;
  --color-accent-contrast: #ffffff;
  --color-danger: #f87171;
  --color-danger-hover: #ef4444;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.3);

  color-scheme: dark;
}