[data-layout-mode="compact"] {
  --compact-border-light: #e7e7e7;
  --compact-border-dark: #303030;
  --compact-accent: #727272;
  --compact-topbar-light: #f3f3f3;
  --compact-topbar-dark: #2a2a2a;
  --compact-rail-dark: #202020;
  --compact-sidebar-dark: #242424;
  --compact-sidebar-foreground-dark: #b1b1b1;
  --compact-workspace-dark: #1e1e1e;
  --compact-workspace-light: #ffffff;
  --compact-icon-hover: #181818;
  --compact-icon-active: #545454;
}

:root {
  color-scheme: light;

  --gn-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gn-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --gn-font-size-xs: 0.75rem;
  --gn-font-size-sm: 0.875rem;
  --gn-font-size-md: 1rem;
  --gn-font-size-lg: 1.125rem;
  --gn-font-size-xl: 1.375rem;
  --gn-line-height-tight: 1.3;
  --gn-line-height-normal: 1.5;

  --gn-space-1: 0.25rem;
  --gn-space-2: 0.5rem;
  --gn-space-3: 0.75rem;
  --gn-space-4: 1rem;
  --gn-space-5: 1.25rem;
  --gn-space-6: 1.5rem;
  --gn-space-8: 2rem;
  --gn-space-10: 2.5rem;
  --gn-space-12: 3rem;

  --gn-control-compact: 2rem;
  --gn-control-default: 2.5rem;
  --gn-control-target: 2.5rem;
  --gn-radius-sm: 6px;
  --gn-radius-md: 9px;
  --gn-radius-lg: 12px;

  --gn-bg-canvas: #f3f6f1;
  --gn-bg-workspace: #f7f9f6;
  --gn-bg-panel: #ffffff;
  --gn-bg-document: var(--gn-bg-panel);
  --gn-document-border: var(--gn-palette-tw-gray-200);
  --gn-bg-card: #ffffff;
  --gn-bg-elevated: #ffffff;
  --gn-menu-bg: var(--gn-palette-tw-white);
  --gn-menu-hover: var(--gn-palette-tw-neutral-100);
  --gn-menu-border: var(--gn-palette-tw-neutral-200);
  --gn-menu-text: var(--gn-palette-tw-neutral-700);
  --gn-menu-text-active: var(--gn-palette-tw-neutral-900);
  --gn-green-500: #10c96b;
  --gn-green-600: #0ca85a;
  --gn-green-700: #087c44;
  --gn-green-soft: rgba(16, 201, 107, 0.1);
  --gn-green-glow: rgba(16, 201, 107, 0.18);
  --gn-orange-500: #ff5a12;
  --gn-orange-600: #e64900;
  --gn-orange-soft: rgba(255, 90, 18, 0.1);
  --gn-red-500: #dc2626;
  --gn-red-600: #b91c1c;
  --gn-red-soft: rgba(220, 38, 38, 0.1);
  --gn-danger-solid: #b91c1c;
  --gn-danger-solid-hover: #991b1b;
  --gn-text-primary: #111612;
  --gn-text-secondary: #4f5a52;
  --gn-text-muted: #6f6f6f;
  --gn-text-on-brand: #06140c;
  --gn-text-on-danger: #ffffff;
  --gn-border-subtle: rgba(20, 45, 27, 0.1);
  --gn-border-default: rgba(20, 45, 27, 0.16);
  --gn-border-hover: rgba(20, 45, 27, 0.2);
  --gn-overlay: rgba(9, 14, 10, 0.52);
  --gn-focus-color: var(--gn-palette-tw-neutral-500);
  --gn-focus-ring: 0 0 0 2px var(--gn-focus-color);
  --gn-shadow-card: 0 14px 40px rgba(24, 42, 29, 0.07);
  --gn-shadow-dialog: 0 24px 64px rgba(17, 24, 19, 0.16);
  --gn-duration-fast: 120ms;
  --gn-duration-normal: 180ms;
  --gn-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

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

  --gn-bg-canvas: #090b09;
  --gn-bg-workspace: #0d100e;
  --gn-bg-panel: #111411;
  --gn-bg-document: var(--gn-palette-legacy--141414);
  --gn-document-border: var(--gn-palette-legacy--2a2a2a);
  --gn-bg-card: #161a16;
  --gn-bg-elevated: #1c211d;
  --gn-menu-bg: var(--gn-palette-tw-neutral-800);
  --gn-menu-hover: var(--gn-palette-tw-neutral-700);
  --gn-menu-border: var(--gn-palette-tw-neutral-700);
  --gn-menu-text: var(--gn-palette-tw-neutral-200);
  --gn-menu-text-active: var(--gn-palette-tw-white);
  --gn-green-500: #16f27e;
  --gn-green-600: #0dcc68;
  --gn-green-700: #07964d;
  --gn-green-soft: rgba(22, 242, 126, 0.1);
  --gn-green-glow: rgba(22, 242, 126, 0.24);
  --gn-orange-500: #ff5a12;
  --gn-orange-600: #e94b00;
  --gn-orange-soft: rgba(255, 90, 18, 0.12);
  --gn-red-500: #f87171;
  --gn-red-600: #ef4444;
  --gn-red-soft: rgba(248, 113, 113, 0.12);
  --gn-danger-solid: #b91c1c;
  --gn-danger-solid-hover: #991b1b;
  --gn-text-primary: #f2f6f2;
  --gn-text-secondary: #aab4ac;
  --gn-text-muted: #69736b;
  --gn-text-on-brand: #06140c;
  --gn-border-subtle: rgba(235, 255, 241, 0.08);
  --gn-border-default: rgba(235, 255, 241, 0.13);
  --gn-border-hover: rgba(235, 255, 241, 0.16);
  --gn-overlay: rgba(0, 0, 0, 0.68);
  --gn-focus-color: var(--gn-palette-tw-neutral-400);
  --gn-focus-ring: 0 0 0 2px var(--gn-focus-color);
  --gn-shadow-card: 0 18px 48px rgba(0, 0, 0, 0.28);
  --gn-shadow-dialog: 0 28px 72px rgba(0, 0, 0, 0.48);
}