/* Rosin design system: primitive → semantic → component. */
:root {
  /* Primitive color */
  --color-white: hsl(0 0% 100%);
  --color-neutral-25: hsl(270 14% 99%);
  --color-neutral-50: hsl(270 8% 97%);
  --color-neutral-100: hsl(270 7% 94%);
  --color-neutral-150: hsl(270 6% 90%);
  --color-neutral-200: hsl(270 6% 84%);
  --color-neutral-300: hsl(270 5% 72%);
  --color-neutral-400: hsl(270 5% 57%);
  --color-neutral-450: hsl(270 5% 49%);
  --color-neutral-500: hsl(270 6% 41%);
  --color-neutral-600: hsl(270 7% 31%);
  --color-neutral-700: hsl(270 9% 22%);
  --color-neutral-800: hsl(270 13% 15%);
  --color-neutral-900: hsl(270 18% 10%);
  --color-plum-50: hsl(273 35% 97%);
  --color-plum-100: hsl(273 31% 93%);
  --color-plum-200: hsl(273 25% 82%);
  --color-plum-500: hsl(273 28% 48%);
  --color-plum-600: hsl(273 31% 37%);
  --color-plum-700: hsl(273 34% 29%);
  --color-green-50: hsl(154 48% 96%);
  --color-green-600: hsl(160 66% 33%);
  --color-amber-50: hsl(42 100% 96%);
  --color-amber-700: hsl(37 76% 33%);
  --color-red-50: hsl(353 100% 97%);
  --color-red-600: hsl(353 65% 47%);

  /* Primitive spacing: 4px base */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  /* Primitive typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: "SF Pro Display", "Avenir Next", "PingFang SC",
    "Hiragino Sans GB", var(--font-sans);
  --font-brand: "Avenir Next", var(--font-sans);
  --font-mono: "SFMono-Regular", "SF Mono", Consolas, monospace;
  --font-size-2xs: 0.6875rem;
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --line-tight: 1.2;
  --line-snug: 1.4;
  --line-normal: 1.6;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-label: 0.005em;
  --tracking-wide: 0.08em;

  /* Primitive shape, depth, motion */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px hsl(270 18% 10% / 0.04);
  --shadow-md: 0 8px 30px hsl(270 18% 10% / 0.07);
  --shadow-lg: 0 20px 48px hsl(270 18% 10% / 0.1);
  --shadow-drawer: 18px 0 48px hsl(270 18% 10% / 0.12);
  --shadow-button: 0 1px 2px hsl(270 18% 10% / 0.14),
    0 7px 18px hsl(270 18% 10% / 0.14);
  --shadow-button-hover: 0 2px 4px hsl(270 18% 10% / 0.12),
    0 11px 24px hsl(273 34% 29% / 0.18);
  --shadow-card-hover: 0 10px 28px hsl(270 18% 10% / 0.08);
  --shadow-composer-hover: 0 12px 36px hsl(270 18% 10% / 0.085);
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --duration-emphasized: 280ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --filter-header: blur(16px) saturate(140%);
  --z-sticky: 20;
  --z-toast: 40;
  --z-scrim: 60;
  --z-sidebar: 70;
  --z-pointer: 90;

  /* Semantic color */
  --surface-canvas: var(--color-neutral-50);
  --surface-primary: var(--color-white);
  --surface-header: hsl(0 0% 100% / 0.88);
  --surface-secondary: var(--color-neutral-25);
  --surface-muted: var(--color-neutral-100);
  --surface-brand: var(--color-plum-50);
  --surface-success: var(--color-green-50);
  --surface-warning: var(--color-amber-50);
  --surface-danger: var(--color-red-50);
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-700);
  --text-muted: var(--color-neutral-600);
  --text-faint: var(--color-neutral-500);
  --text-on-brand: var(--color-white);
  --text-brand: var(--color-plum-600);
  --text-brand-highlight: hsl(292 28% 40%);
  --text-success: var(--color-green-600);
  --text-warning: var(--color-amber-700);
  --text-danger: var(--color-red-600);
  --border-subtle: var(--color-neutral-100);
  --border-default: var(--color-neutral-150);
  --border-strong: var(--color-neutral-200);
  --border-brand: var(--color-plum-200);
  --action-primary: var(--color-neutral-900);
  --action-primary-hover: var(--color-plum-700);
  --action-primary-active: hsl(273 36% 23%);
  --action-secondary-hover: var(--color-neutral-100);
  --focus-color: var(--color-plum-500);
  --focus-shadow: 0 0 0 4px hsl(273 28% 48% / 0.16);
  --tap-highlight: hsl(273 28% 48% / 0.14);
  --overlay-scrim: hsl(270 18% 10% / 0.24);
  --gradient-brand-word: linear-gradient(
    112deg,
    var(--text-primary) 8%,
    var(--text-brand) 92%
  );
  --gradient-hero-accent: linear-gradient(
    104deg,
    var(--text-brand) 0%,
    var(--text-brand-highlight) 48%,
    var(--text-brand) 100%
  );
  --pointer-orbit: hsl(273 31% 37% / 0.56);
  --pointer-orbit-active: hsl(273 31% 37% / 0.86);
  --pointer-orbit-secondary: hsl(292 28% 40% / 0.38);
  --pointer-satellite: hsl(292 28% 40% / 0.86);
  --pointer-dot: var(--text-brand);
  --pointer-dot-glow: hsl(273 31% 37% / 0.12);
  --pointer-orbit-glow: transparent;
  --pointer-orbit-width: 1.25px;
  --pointer-input-fill: hsl(270 8% 34% / 0.14);
  --pointer-input-nucleus: hsl(270 8% 32% / 0.86);

  /* Semantic layout */
  --page-max: 76rem;
  --content-max: 53rem;
  --content-copy-max: 36rem;
  --hero-copy-max: 40rem;
  --content-copy-mobile-max: 22rem;
  --page-gutter: clamp(var(--space-4), 3vw, var(--space-8));
  --section-gap: clamp(var(--space-10), 7vw, var(--space-20));
  --viewport-min: 20rem;
  --topbar-height: var(--space-16);
  --topbar-height-mobile: 3.75rem;
  --brand-mark-size: var(--space-8);
  --brand-mark-size-mobile: var(--space-7);
  --sidebar-width: 18.5rem;
  --sidebar-mobile-width: min(20rem, calc(100vw - var(--space-8)));

  /* Component: custom pointer */
  --pointer-halo-size: 1.875rem;
  --pointer-dot-size: 0.3125rem;
  --pointer-scale-moving: 1.12;
  --pointer-scale-editing: 1.46;
  --pointer-scale-editing-pressed: 1.08;
  --pointer-scale-hover: 1.62;
  --pointer-scale-pressed: 0.86;

  /* Component: buttons */
  --button-height: 2.5rem;
  --button-height-lg: 2.875rem;
  --button-height-compact: 2.25rem;
  --button-height-small: var(--space-8);
  --button-padding-x: var(--space-4);
  --button-radius: var(--radius-md);
  --button-font-size: var(--font-size-sm);
  --button-font-weight: var(--weight-semibold);
  --button-primary-bg: var(--action-primary);
  --button-primary-bg-hover: var(--action-primary-hover);
  --button-primary-bg-active: var(--action-primary-active);
  --button-primary-fg: var(--text-on-brand);
  --button-primary-shadow: var(--shadow-button);
  --button-primary-shadow-hover: var(--shadow-button-hover);
  --button-secondary-bg: var(--surface-primary);
  --button-secondary-bg-hover: var(--action-secondary-hover);
  --button-secondary-fg: var(--text-primary);
  --button-secondary-border: var(--border-default);

  /* Component: exploration mode */
  --mode-picker-bg: var(--surface-secondary);
  --mode-picker-border: var(--border-default);
  --mode-picker-selected-bg: var(--surface-primary);
  --mode-picker-selected-fg: var(--text-primary);
  --mode-picker-muted-fg: var(--text-faint);
  --mode-picker-radius: var(--radius-lg);
  --mode-option-radius: var(--radius-md);
  --mode-option-min-width: 5.25rem;
  --mode-picker-shadow: var(--shadow-sm);
  --mode-tooltip-width: 10.5rem;
  --mode-tooltip-bg: var(--surface-primary);
  --mode-tooltip-fg: var(--text-primary);
  --mode-tooltip-muted: var(--text-muted);
  --mode-tooltip-border: var(--border-strong);
  --mode-tooltip-shadow: var(--shadow-lg);

  /* Component: inputs */
  --input-bg: var(--surface-primary);
  --input-fg: var(--text-primary);
  --input-placeholder: var(--text-faint);
  --input-border: var(--border-default);
  --input-border-hover: var(--border-strong);
  --input-border-focus: var(--focus-color);
  --input-border-error: var(--text-danger);
  --input-radius: var(--radius-lg);
  --input-height-small: 2.25rem;
  --target-input-min-height: 6.5rem;
  --target-input-min-height-mobile: var(--space-28);
  --input-resize-handle-size: 2.75rem;
  --followup-input-max-height: var(--space-32);
  --file-name-max-width: 13rem;
  --task-side-min-width: var(--space-28);

  /* Component: surfaces */
  --panel-bg: var(--surface-primary);
  --panel-border: var(--border-default);
  --panel-radius: var(--radius-lg);
  --panel-shadow: var(--shadow-sm);
  --panel-shadow-hover: var(--shadow-card-hover);
  --composer-radius: var(--radius-xl);
  --composer-shadow: var(--shadow-md);
  --composer-shadow-hover: var(--shadow-composer-hover);
  --badge-radius: var(--radius-full);
}

:root[data-theme="dark"] {
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.22);
  --shadow-md: 0 12px 36px hsl(0 0% 0% / 0.28);
  --shadow-lg: 0 24px 60px hsl(0 0% 0% / 0.34);
  --shadow-drawer: 18px 0 52px hsl(0 0% 0% / 0.42);
  --shadow-button: 0 1px 2px hsl(0 0% 0% / 0.3),
    0 8px 20px hsl(273 28% 55% / 0.12);
  --shadow-button-hover: 0 2px 4px hsl(0 0% 0% / 0.28),
    0 12px 28px hsl(273 28% 65% / 0.18);
  --shadow-card-hover: 0 12px 32px hsl(0 0% 0% / 0.28);
  --shadow-composer-hover: 0 16px 44px hsl(0 0% 0% / 0.32);

  --surface-canvas: hsl(270 14% 7%);
  --surface-primary: hsl(270 12% 10%);
  --surface-header: hsl(270 14% 7% / 0.9);
  --surface-secondary: hsl(270 10% 13%);
  --surface-muted: hsl(270 10% 16%);
  --surface-brand: hsl(273 18% 17%);
  --surface-success: hsl(160 24% 14%);
  --surface-warning: hsl(38 28% 14%);
  --surface-danger: hsl(353 24% 15%);
  --text-primary: hsl(270 15% 94%);
  --text-secondary: hsl(270 10% 80%);
  --text-muted: hsl(270 8% 68%);
  --text-faint: hsl(270 7% 57%);
  --text-on-brand: hsl(270 18% 10%);
  --text-brand: hsl(273 25% 72%);
  --text-brand-highlight: hsl(292 30% 80%);
  --text-success: hsl(160 42% 66%);
  --text-warning: hsl(38 62% 68%);
  --text-danger: hsl(353 54% 70%);
  --border-subtle: hsl(270 9% 16%);
  --border-default: hsl(270 8% 21%);
  --border-strong: hsl(270 8% 29%);
  --border-brand: hsl(273 20% 38%);
  --action-primary: hsl(273 24% 76%);
  --action-primary-hover: hsl(273 27% 82%);
  --action-primary-active: hsl(273 22% 68%);
  --action-secondary-hover: hsl(270 10% 17%);
  --focus-color: hsl(273 29% 71%);
  --focus-shadow: 0 0 0 4px hsl(273 29% 71% / 0.18);
  --tap-highlight: hsl(273 29% 71% / 0.14);
  --overlay-scrim: hsl(270 20% 3% / 0.62);
  --gradient-brand-word: linear-gradient(
    112deg,
    var(--text-primary) 8%,
    var(--text-brand-highlight) 92%
  );
  --gradient-hero-accent: linear-gradient(
    104deg,
    var(--text-brand) 0%,
    var(--text-brand-highlight) 48%,
    var(--text-brand) 100%
  );
  --pointer-orbit: hsl(292 42% 84% / 0.84);
  --pointer-orbit-active: hsl(292 52% 90% / 0.98);
  --pointer-orbit-secondary: hsl(267 34% 76% / 0.64);
  --pointer-satellite: hsl(292 55% 90% / 0.98);
  --pointer-dot: hsl(292 45% 87%);
  --pointer-dot-glow: hsl(292 50% 84% / 0.24);
  --pointer-orbit-glow: hsl(292 50% 82% / 0.22);
  --pointer-orbit-width: 2px;
  --pointer-dot-size: 0.34375rem;
  --pointer-input-fill: hsl(270 8% 72% / 0.18);
  --pointer-input-nucleus: hsl(270 8% 82% / 0.92);
}