/* Merset Personal Workbench — Core runtime design tokens
   Source contract: Core 4.0.0-draft / Workbench Profile 1.2.0 */

:root {
  color-scheme: light;

  /* Typography */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas,
    "Liberation Mono", monospace;
  --font-serif: var(--font-sans);
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-display: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --font-size-workbench-hero: clamp(2.125rem, 1.65rem + 1.9vw, 3.25rem);
  --font-size-workbench-page: clamp(2rem, 1.55rem + 1.6vw, 2.875rem);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  /* 4px sub-grid on an 8px rhythm */
  --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-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Shape and sizing */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --focus-width: 2px;
  --control-height-sm: 2.25rem;
  --control-height-md: 2.75rem;
  --control-height-lg: 3rem;
  --touch-target-min: 2.75rem;
  --icon-size-sm: 1rem;
  --icon-size-md: 1.25rem;
  --icon-size-lg: 1.5rem;
  --reading-width: 68ch;
  --dashboard-max-width: 100rem;
  --header-height: 4rem;
  --bottom-navigation-height: 4.75rem;
  --safe-area-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-area-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --safe-area-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-area-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));

  /* Elevation and motion */
  --shadow-low: 0 2px 8px rgb(15 23 42 / 0.08);
  --shadow-medium: 0 12px 28px rgb(15 23 42 / 0.12);
  --shadow-high: 0 24px 56px rgb(15 23 42 / 0.18);
  --shadow-dropdown: 0 12px 28px rgb(15 23 42 / 0.14);
  --shadow-editorial-panel: 0 10px 32px rgb(23 32 51 / 0.07);
  --shadow-editorial-hero: 0 24px 64px rgb(23 32 51 / 0.14);
  --shadow-mobile-dock: 0 16px 40px rgb(23 32 51 / 0.16);
  --duration-instant: 100ms;
  --duration-fast: 160ms;
  --duration-normal: 240ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --z-base: 0;
  --z-sticky: 100;
  --z-fixed: 150;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* Light semantic colors */
  --color-bg-canvas: #f4f2ed;
  --color-bg-surface: #fffdf8;
  --color-bg-surface-subtle: #ece9e1;
  --color-bg-surface-raised: #ffffff;
  --color-bg-disabled: #e3ded4;
  --color-bg-overlay: rgb(23 32 51 / 0.62);
  --color-bg-glass: rgb(255 253 248 / 0.9);
  --color-scroll-thumb: rgb(77 89 104 / 0.3);
  --color-scroll-thumb-hover: rgb(77 89 104 / 0.5);
  --color-terminal-bg: rgb(23 32 51 / 0.05);
  --color-terminal-border: rgb(23 32 51 / 0.09);
  --color-text-primary: #172033;
  --color-text-secondary: #4d5968;
  --color-text-muted: #697383;
  --color-text-disabled: #697383;
  --color-text-inverse: #fffdf8;
  --color-border-subtle: #ded8cd;
  --color-border-default: #c8c0b4;
  --color-border-strong: #6a645c;
  --color-focus: #2459d3;
  --color-focus-halo: #fffdf8;
  --color-action-primary-bg: #2459d3;
  --color-action-primary-hover: #1d49b3;
  --color-action-primary-active: #173b91;
  --color-action-primary-fg: #ffffff;
  --color-action-primary-soft: #e6edff;
  --color-action-secondary-bg: #ece9e1;
  --color-action-secondary-hover: #ded8cd;
  --color-action-secondary-active: #c8c0b4;
  --color-action-secondary-fg: #172033;
  --color-action-ghost-hover: #ece9e1;
  --color-action-ghost-active: #ded8cd;
  --color-action-danger-bg: #b91c1c;
  --color-action-danger-hover: #991b1b;
  --color-action-danger-active: #7f1d1d;
  --color-action-danger-fg: #ffffff;
  --color-link: #1d49b3;
  --color-link-hover: #173b91;
  --color-success-bg: #d1fae5;
  --color-success-fg: #047857;
  --color-success-border: #6ee7b7;
  --color-warning-bg: #fef3c7;
  --color-warning-fg: #92400e;
  --color-warning-border: #fcd34d;
  --color-danger-bg: #fee2e2;
  --color-danger-fg: #b91c1c;
  --color-danger-border: #fca5a5;
  --color-info-bg: #dbeafe;
  --color-info-fg: #1d4ed8;
  --color-info-border: #93c5fd;
  --color-project-photo: #b94814;
  --color-project-photo-soft: #fff7ed;
  --color-project-fitness: #08745b;
  --color-project-fitness-soft: #ecfdf5;
  --color-editorial-hero-bg: #172033;
  --color-editorial-hero-fg: #fffdf8;
  --color-editorial-hero-muted: #c6d0df;
  --color-editorial-hero-rule: #3b4960;
  --color-editorial-note-bg: #fff7df;
  --color-editorial-note-fg: #172033;
  --color-editorial-note-muted: #4d5968;
  --color-editorial-note-border: #e8d7a6;
  --color-editorial-nav-active-bg: #172033;
  --color-editorial-nav-active-fg: #fffdf8;
  --glass-blur: 0.75rem;
  --glass-saturation: 110%;

  /* Workbench composition */
  --workbench-panel-radius: var(--radius-xl);
  --workbench-hero-radius: var(--radius-2xl);
  --workbench-hero-padding: clamp(var(--space-5), 3.2vw, var(--space-10));
  --workbench-page-gutter: clamp(var(--space-3), 3vw, var(--space-8));
  --workbench-dock-max-width: 42.5rem;

  /* Component aliases */
  --button-primary-bg: var(--color-action-primary-bg);
  --button-primary-fg: var(--color-action-primary-fg);
  --button-secondary-bg: var(--color-bg-surface);
  --button-secondary-fg: var(--color-action-secondary-fg);
  --button-secondary-border: var(--color-border-default);
  --button-danger-bg: var(--color-action-danger-bg);
  --button-danger-fg: var(--color-action-danger-fg);
  --field-bg: var(--color-bg-surface);
  --field-border: var(--color-border-strong);
  --card-padding: clamp(var(--space-4), 2vw, var(--space-6));

  /* Legacy aliases retained during the staged migration */
  --bg-body: var(--color-bg-canvas);
  --glass-bg: var(--color-bg-glass);
  --glass-bg-primary: var(--color-bg-surface);
  --glass-border: var(--color-border-subtle);
  --glass-border-primary: var(--color-border-default);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --accent-primary: var(--color-action-primary-bg);
  --accent-glow: var(--color-action-primary-bg);
  --accent-success: var(--color-success-fg);
  --accent-danger: var(--color-danger-fg);
  --accent-warning: var(--color-warning-fg);
  --glass-shadow: var(--shadow-low);
  --glass-shadow-hover: var(--shadow-medium);
  --glass-shadow-primary: var(--shadow-low);
  --glass-blur-primary: var(--glass-blur);
  --radius-glass: var(--radius-lg);
  --radius-inner: var(--radius-md);
  --paper: var(--color-bg-canvas);
  --paper-raised: var(--color-bg-surface);
  --paper-muted: var(--color-bg-surface-subtle);
  --paper-deep: var(--color-border-subtle);
  --ink: var(--color-text-primary);
  --ink-soft: var(--color-text-secondary);
  --muted: var(--color-text-muted);
  --muted-strong: var(--color-text-secondary);
  --rule: var(--color-border-subtle);
  --rule-strong: var(--color-border-default);
  --photo: var(--color-project-photo);
  --photo-soft: var(--color-project-photo-soft);
  --fitness: var(--color-project-fitness);
  --fitness-soft: var(--color-project-fitness-soft);
  --success: var(--color-success-fg);
  --success-soft: var(--color-success-bg);
  --warning: var(--color-warning-fg);
  --warning-soft: var(--color-warning-bg);
  --danger: var(--color-danger-fg);
  --danger-soft: var(--color-danger-bg);
  --info: var(--color-info-fg);
  --info-soft: var(--color-info-bg);
  --focus: var(--color-focus);
  --shadow-modal: var(--shadow-high);
  --page: min(var(--dashboard-max-width), calc(100vw - 3rem));
  --header-h: var(--header-height);
  --duration: var(--duration-normal);
  --bento-gap: clamp(var(--space-4), 2vw, var(--space-6));
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-canvas: #0c1117;
  --color-bg-surface: #131b25;
  --color-bg-surface-subtle: #1b2531;
  --color-bg-surface-raised: #202a37;
  --color-bg-disabled: #2a3543;
  --color-bg-overlay: rgb(2 6 23 / 0.72);
  --color-bg-glass: rgb(19 27 37 / 0.9);
  --color-scroll-thumb: rgb(148 163 184 / 0.34);
  --color-scroll-thumb-hover: rgb(203 213 225 / 0.56);
  --color-terminal-bg: rgb(2 6 23 / 0.44);
  --color-terminal-border: rgb(148 163 184 / 0.16);
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-text-disabled: #94a3b8;
  --color-text-inverse: #172033;
  --color-border-subtle: #2a3645;
  --color-border-default: #42536a;
  --color-border-strong: #93a4ba;
  --color-focus: #93c5fd;
  --color-focus-halo: #090e17;
  --color-action-secondary-bg: #1e293b;
  --color-action-secondary-hover: #334155;
  --color-action-secondary-active: #475569;
  --color-action-secondary-fg: #f8fafc;
  --color-action-ghost-hover: #1e293b;
  --color-action-ghost-active: #334155;
  --color-action-primary-soft: #172554;
  --color-link: #93c5fd;
  --color-link-hover: #bfdbfe;
  --color-success-bg: #052e2b;
  --color-success-fg: #6ee7b7;
  --color-success-border: #047857;
  --color-warning-bg: #3b2206;
  --color-warning-fg: #fde68a;
  --color-warning-border: #a16207;
  --color-danger-bg: #450a0a;
  --color-danger-fg: #fca5a5;
  --color-danger-border: #b91c1c;
  --color-info-bg: #172554;
  --color-info-fg: #bfdbfe;
  --color-info-border: #1d4ed8;
  --color-project-photo: #fb923c;
  --color-project-photo-soft: #431407;
  --color-project-fitness: #34d399;
  --color-project-fitness-soft: #052e2b;
  --color-editorial-hero-bg: #182332;
  --color-editorial-hero-fg: #f8fafc;
  --color-editorial-hero-muted: #c8d3e1;
  --color-editorial-hero-rule: #40506a;
  --color-editorial-note-bg: #f4eedc;
  --color-editorial-note-fg: #172033;
  --color-editorial-note-muted: #4d5968;
  --color-editorial-note-border: #d9c99c;
  --color-editorial-nav-active-bg: #2459d3;
  --color-editorial-nav-active-fg: #ffffff;
  --shadow-low: 0 2px 8px rgb(0 0 0 / 0.28);
  --shadow-medium: 0 12px 28px rgb(0 0 0 / 0.36);
  --shadow-high: 0 24px 56px rgb(0 0 0 / 0.48);
  --shadow-dropdown: 0 16px 36px rgb(0 0 0 / 0.42);
  --shadow-editorial-panel: 0 12px 36px rgb(0 0 0 / 0.22);
  --shadow-editorial-hero: 0 28px 72px rgb(0 0 0 / 0.34);
  --shadow-mobile-dock: 0 18px 44px rgb(0 0 0 / 0.42);
}