@layer reset, base, components, modules, utilities;

:root {
  --color-canvas: #f8f8f6;
  --color-canvas-raised: #fffdfa;
  --color-canvas-alt: #f3f1ec;
  --color-canvas-inset: #f6f4ef;
  --color-surface-alt: #f3f1ec;

  --color-ink: #1a1d26;
  --color-ink-dark: #3d4252;
  --color-ink-medium: #6b7084;
  --color-ink-light: #9da2b3;
  --color-ink-lightest: #e2e4ea;
  --color-ink-inverted: #fffaf6;

  --color-primary: #c2410c;
  --color-primary-hover: #9a3412;
  --color-primary-light: #fff4ea;
  --color-primary-border: #fdba74;

  --color-trigger: #fff4ea;
  --color-trigger-border: #fdba74;
  --color-trigger-icon: #c2410c;

  --color-step: #eef2ff;
  --color-step-border: #a5b4fc;
  --color-step-icon: #4f46e5;

  --color-action: #f0fdf4;
  --color-action-border: #86efac;
  --color-action-icon: #15803d;

  --color-logic: #fdf4ff;
  --color-logic-border: #d8b4fe;
  --color-logic-icon: #9333ea;

  --color-link: #9a3412;
  --color-link-hover: #7c2d12;
  --color-selected: #fff4ea;
  --color-focus: #c2410c;

  --color-positive: #16a34a;
  --color-negative: #dc2626;
  --color-warning: #b45309;
  --color-positive-light: #eefbf2;
  --color-positive-border: #cbeed6;
  --color-negative-light: #fff2f2;
  --color-negative-border: #f7c9c9;
  --color-warning-light: #fff7df;
  --color-warning-border: #fcd9a7;
  --color-info: #2563eb;
  --color-info-light: #edf4ff;
  --color-info-border: #c7dafd;
  --color-muted-light: #f8fafc;
  --color-muted-border: #d7dee8;

  --color-border: #e2e4ea;
  --color-border-strong: #c9cdd8;
  --data-view-panel-border: #e2e4ea;
  --data-view-panel-background: #f6f4ef;
  --data-view-toolbar-background: rgba(255, 255, 255, 0.92);
  --data-view-key: #4f46e5;
  --data-view-string: #15803d;
  --data-view-number: #9a3412;
  --data-view-literal: #be185d;
  --data-view-punctuation: #6b7084;
  --data-view-muted: #9da2b3;
  --data-view-match: #fef3c7;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --shadow-elevated:
    0 12px 32px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
  --shadow-panel: -16px 0 40px rgba(15, 23, 42, 0.10);

  --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-card: 1.25rem;
  --space-card-lg: 1.5rem;

  --inline-space: 1ch;
  --block-space: 1rem;

  --font-sans:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "Berkeley Mono", ui-monospace, "Cascadia Code", monospace;

  --text-xs: 0.6875rem;
  --text-label-mono: 0.6875rem;
  --text-caption: 0.75rem;
  --text-small: 0.8125rem;
  --text-label: 0.8125rem;
  --text-body: 0.875rem;
  --text-normal: 0.875rem;
  --text-card-heading: 0.9375rem;
  --text-section: 1rem;
  --text-large: 1.125rem;
  --text-xl: 1.25rem;
  --text-page-title: 1.25rem;
  --text-2xl: 1.5rem;
  --text-category: 0.6875rem;
  --letter-spacing-label: 0.06em;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --radius-small: 8px;
  --radius: 12px;
  --radius-large: 16px;

  --z-popup: 10;
  --z-nav: 30;
  --z-tooltip: 50;
  --z-drawer: 40;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --main-max-width: 72rem;
  --main-padding: clamp(var(--space-4), 3vw, var(--space-8));
  --sidebar-width: 260px;
  --panel-width: 500px;
  --topbar-height: 3.5rem;
  --bottom-drawer-height: 16rem;
  --bg-grid:
    linear-gradient(rgba(61, 66, 82, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 66, 82, 0.045) 1px, transparent 1px);
  --bg-grid-size: 24px 24px;
}

[data-app-shell].app-layout {
  --color-canvas: #f7f7f5;
  --color-canvas-raised: #fffdfa;
  --color-canvas-alt: #f3f1ec;
  --color-canvas-inset: #f6f4ef;
  --color-surface-alt: #f3f1ec;

  --color-ink: #1f2027;
  --color-ink-dark: #3f4351;
  --color-ink-medium: #6b7084;
  --color-ink-light: #9da2b3;
  --color-ink-lightest: #e2e4ea;
  --color-ink-inverted: #fffaf6;

  --color-primary: #c2410c;
  --color-primary-hover: #9a3412;
  --color-primary-light: #fff4ea;
  --color-primary-border: #fdba74;

  --color-trigger: #fff7ed;
  --color-trigger-border: #fdba74;
  --color-trigger-icon: #c2410c;

  --color-step: #eef2ff;
  --color-step-border: #a5b4fc;
  --color-step-icon: #4f46e5;

  --color-action: #f0fdf4;
  --color-action-border: #86efac;
  --color-action-icon: #15803d;

  --color-logic: #fdf4ff;
  --color-logic-border: #d8b4fe;
  --color-logic-icon: #9333ea;

  --color-link: #9a3412;
  --color-link-hover: #7c2d12;
  --color-selected: #fff4ea;
  --color-focus: #c2410c;

  --color-positive: #16803b;
  --color-negative: #c93d3d;
  --color-warning: #b45309;
  --color-positive-light: #eefbf2;
  --color-positive-border: #cbeed6;
  --color-negative-light: #fff2f2;
  --color-negative-border: #f7c9c9;
  --color-warning-light: #fff7df;
  --color-warning-border: #fcd9a7;
  --color-info: #2563eb;
  --color-info-light: #edf4ff;
  --color-info-border: #c7dafd;
  --color-muted-light: #f8fafc;
  --color-muted-border: #d7dee8;

  --color-border: #e3e4e8;
  --color-border-strong: #c9cdd8;

  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.78),
    0 10px 28px rgba(15, 23, 42, 0.05);
  --shadow-card-hover:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 18px 40px rgba(15, 23, 42, 0.08);
  --shadow-elevated:
    0 24px 56px rgba(15, 23, 42, 0.12),
    0 6px 18px rgba(15, 23, 42, 0.08);
  --shadow-panel: -18px 0 44px rgba(15, 23, 42, 0.12);

  --space-6: 1.625rem;
  --space-8: 2.25rem;
  --space-10: 3rem;
  --space-12: 4rem;
  --space-card: 1.5rem;
  --space-card-lg: 1.875rem;

  --font-sans:
    "Plus Jakarta Sans", "Inter", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Sora", "Plus Jakarta Sans", system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-label-mono: 0.72rem;
  --text-caption: 0.8125rem;
  --text-small: 0.875rem;
  --text-label: 0.875rem;
  --text-body: 1rem;
  --text-normal: 1rem;
  --text-card-heading: 1.0625rem;
  --text-section: 1.125rem;
  --text-large: 1.25rem;
  --text-xl: 1.5rem;
  --text-page-title: 2rem;
  --text-2xl: 2.375rem;
  --text-category: 0.75rem;
  --letter-spacing-label: 0.08em;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius: 14px;
  --radius-large: 18px;

  --main-max-width: 84rem;
  --main-padding: clamp(1.25rem, 1rem + 1vw, 2.75rem);
  --sidebar-width: 280px;
  --panel-width: 560px;
  --bg-grid:
    linear-gradient(rgba(61, 66, 82, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 66, 82, 0.04) 1px, transparent 1px);
}

[data-app-shell][data-data-theme="warm"],
.settings-live-preview[data-data-theme="warm"] {
  --data-view-panel-background: #f6f4ef;
  --data-view-toolbar-background: rgba(255, 255, 255, 0.92);
  --data-view-key: #4f46e5;
  --data-view-string: #15803d;
  --data-view-number: #9a3412;
  --data-view-literal: #be185d;
  --data-view-punctuation: #6b7084;
  --data-view-muted: #9da2b3;
  --data-view-match: #fef3c7;
}

[data-app-shell][data-data-theme="slate"],
.settings-live-preview[data-data-theme="slate"] {
  --data-view-panel-background: #f4f7fb;
  --data-view-toolbar-background: rgba(248, 251, 255, 0.94);
  --data-view-key: #1d4ed8;
  --data-view-string: #0f766e;
  --data-view-number: #7c3aed;
  --data-view-literal: #b45309;
  --data-view-punctuation: #64748b;
  --data-view-muted: #94a3b8;
  --data-view-match: #dbeafe;
}

[data-app-shell][data-data-theme="forest"],
.settings-live-preview[data-data-theme="forest"] {
  --data-view-panel-background: #f4f6f0;
  --data-view-toolbar-background: rgba(248, 250, 245, 0.94);
  --data-view-key: #14532d;
  --data-view-string: #0f766e;
  --data-view-number: #b45309;
  --data-view-literal: #9333ea;
  --data-view-punctuation: #6b7280;
  --data-view-muted: #94a3b8;
  --data-view-match: #dcfce7;
}

[data-app-shell][data-data-theme="violet"],
.settings-live-preview[data-data-theme="violet"] {
  --data-view-panel-background: #f6f4fb;
  --data-view-toolbar-background: rgba(250, 248, 255, 0.94);
  --data-view-key: #6d28d9;
  --data-view-string: #047857;
  --data-view-number: #c2410c;
  --data-view-literal: #be185d;
  --data-view-punctuation: #6b7280;
  --data-view-muted: #94a3b8;
  --data-view-match: #ede9fe;
}