/* ARHIX presentation foundation. Theme scopes project values; components own geometry. */
:root {
  --arhix-ui-unit: 1px;
  --arhix-ui-compact-unit: clamp(calc(4px / 3), calc(100vmin / 280), 1.5px);
  --arhix-canvas-dark: #28292b;
  --arhix-bootstrap-bg: #fff;
}

[data-ui-theme-scope] {
  color-scheme: light;

  --arhix-canvas: #fff;
  --arhix-surface-raised: #fff;
  --arhix-surface: #f5f5f5;
  --arhix-surface-soft: #f9f9f9;
  --arhix-surface-sunken: #eaeaea;
  --arhix-surface-pill: #fff;
  --arhix-line: #ececec;
  --arhix-island-border: rgb(0 0 0 / 6%);

  --arhix-ink: #000;
  --arhix-ink-active: #4b4b4b;
  --arhix-ink-muted: #8f8f8f;
  --arhix-ink-faint: #bfbfbf;
  --arhix-ink-ghost: #d4d4d4;
  --arhix-canvas-ink: #000;
  --arhix-canvas-text-placeholder: #f1f2f4;
  --arhix-backed-text-ink: #1a1a1a;
  --arhix-drawing-preview-bg: #fff;
  --arhix-drawing-preview-ink: #000;
  --arhix-scene-card-ink: #000;
  --arhix-brand-red: #f01124;
  --arhix-paper: #fff;
  --arhix-paper-ink: #1a1a1a;
  --arhix-paper-text-placeholder: #f1f2f4;
  --arhix-paper-frame: rgb(0 0 0 / 16%);
  --arhix-material-preview-default: #d0d0d0;

  --arhix-accent: #06f;
  --arhix-accent-tint: #ebf1fe;
  --arhix-mark-sticker: #d8b13b;
  --arhix-mark-sheet: var(--arhix-accent);
  --arhix-mark-placed: #6ba477;
  --arhix-mark-problem: #d84a4a;
  --arhix-status-neutral-tint: rgb(143 143 143 / 12%);
  --arhix-status-success: #0d7a41;
  --arhix-status-success-tint: rgb(18 155 82 / 12%);
  --arhix-status-warning: #945f00;
  --arhix-status-warning-tint: rgb(226 151 0 / 14%);
  --arhix-status-warning-soft: rgb(226 151 0 / 8%);
  --arhix-status-error: #a32828;
  --arhix-field-error: color-mix(in srgb, var(--arhix-status-error) 75%, var(--arhix-surface));
  --arhix-icon-secondary: #e6e6e6;
  --arhix-data-blue: #4285f4;
  --arhix-data-red: #ea4335;
  --arhix-data-yellow: #fbbc05;
  --arhix-data-green: #34a853;
  --arhix-folder-blue: rgb(66 133 244 / 20%);
  --arhix-folder-red: rgb(234 67 53 / 20%);
  --arhix-folder-yellow: rgb(251 188 5 / 20%);
  --arhix-folder-green: rgb(52 168 83 / 20%);

  --arhix-shadow-island:
    0 0 0 0.5px rgb(0 0 0 / 3%),
    0 1px 3px rgb(0 0 0 / 5%),
    0 2px 10px rgb(0 0 0 / 10%);
  --arhix-shadow-pill: 0 1px 3px rgb(0 0 0 / 22%);
  --arhix-shadow-pill-pressed: 0 1px 2px rgb(0 0 0 / 8%);
  --arhix-shadow-picker-thumb: 0 1px 3px rgb(0 0 0 / 35%);
  --arhix-shadow-paper: 0 1px 2px rgb(0 0 0 / 8%);

  --arhix-radius-island: calc(12 * var(--arhix-ui-unit));
  --arhix-radius-control: calc(8 * var(--arhix-ui-unit));
  --arhix-radius-pill: calc(6 * var(--arhix-ui-unit));
  --arhix-radius-chip: calc(4 * var(--arhix-ui-unit));
  --arhix-radius-tick: calc(1.5 * var(--arhix-ui-unit));
  --arhix-border-hairline: 1px;

  --arhix-control-height: calc(28 * var(--arhix-ui-unit));
  --arhix-control-width-compact: calc(32 * var(--arhix-ui-unit));
  --arhix-pill-height: calc(24 * var(--arhix-ui-unit));
  --arhix-chip-height: calc(18 * var(--arhix-ui-unit));
  --arhix-badge-height: calc(16 * var(--arhix-ui-unit));
  --arhix-bar-zone-height: calc(38 * var(--arhix-ui-unit));
  --arhix-header-height: calc(44 * var(--arhix-ui-unit));
  --arhix-icon-size: calc(20 * var(--arhix-ui-unit));
  --arhix-icon-size-compact: calc(16 * var(--arhix-ui-unit));
  --arhix-check-size: calc(14 * var(--arhix-ui-unit));
  --arhix-status-size: calc(12 * var(--arhix-ui-unit));
  --arhix-status-dot-size: calc(6 * var(--arhix-ui-unit));
  --arhix-status-stroke-width: calc(1.5 * var(--arhix-ui-unit));
  --arhix-range-track-height: calc(2 * var(--arhix-ui-unit));
  --arhix-inspector-width: calc(172 * var(--arhix-ui-unit));
  --arhix-navigator-panel-width: calc(264 * var(--arhix-ui-unit));
  --arhix-navigator-divider-width: 1px;
  --arhix-inspector-content-width: calc(152 * var(--arhix-ui-unit));
  --arhix-inspector-half-field-width: calc(72 * var(--arhix-ui-unit));
  --arhix-menu-min-width: calc(172 * var(--arhix-ui-unit));
  --arhix-preview-width: calc(28 * var(--arhix-ui-unit));
  --arhix-preview-height: calc(20 * var(--arhix-ui-unit));
  --arhix-picker-thumb-size: calc(12 * var(--arhix-ui-unit));
  --arhix-picker-thumb-inset: calc(var(--arhix-picker-thumb-size) / 2);
  --arhix-scroll-indicator-width: calc(8 * var(--arhix-ui-unit));
  --arhix-scroll-indicator-height: calc(69 * var(--arhix-ui-unit));
  --arhix-scroll-indicator-inset: calc(2 * var(--arhix-ui-unit));
  --arhix-scroll-indicator-thumb-width: calc(4 * var(--arhix-ui-unit));
  --arhix-scroll-indicator-thumb-min-height: calc(12 * var(--arhix-ui-unit));
  --arhix-scroll-indicator-gap: calc(4 * var(--arhix-ui-unit));
  --arhix-notch-inset: calc(6 * var(--arhix-ui-unit));
  --arhix-notch-bar-inset: calc(9 * var(--arhix-ui-unit));
  --arhix-notch-field: calc(var(--arhix-control-height) - 2 * var(--arhix-notch-inset));
  --arhix-notch-bar: calc(var(--arhix-bar-zone-height) - 2 * var(--arhix-notch-bar-inset));

  --arhix-space-block: calc(12 * var(--arhix-ui-unit));
  --arhix-space-gap: calc(8 * var(--arhix-ui-unit));
  --arhix-space-small: calc(6 * var(--arhix-ui-unit));
  --arhix-space-inset: calc(10 * var(--arhix-ui-unit));
  --arhix-space-bar-inset: calc(5 * var(--arhix-ui-unit));
  --arhix-space-micro: calc(4 * var(--arhix-ui-unit));
  --arhix-space-pill: calc(2 * var(--arhix-ui-unit));
  --arhix-space-row: calc(2 * var(--arhix-ui-unit));
  --arhix-space-edge: calc(15 * var(--arhix-ui-unit));
  --arhix-space-section: calc(16 * var(--arhix-ui-unit));

  --arhix-motion-quick: 120ms;
  --arhix-motion-land-min: 120ms;
  --arhix-motion-land-max: 320ms;
  --arhix-ease-land: cubic-bezier(0.22, 0.61, 0.36, 1);

  --arhix-font: "Arhix Inter", system-ui, -apple-system, sans-serif;
  --arhix-font-size-body: calc(12 * var(--arhix-ui-unit));
  --arhix-font-size-small: calc(10 * var(--arhix-ui-unit));
  --arhix-font-weight-body: 400;
  --arhix-font-weight-chrome: 500;
  --arhix-workspace-backdrop: #f5f6f7;
  --arhix-canvas-grid-line: rgb(21 25 31 / 4%);
  --arhix-picker-thumb-ring: #fff;
}

body[data-canvas-theme="dark"] {
  --arhix-bootstrap-bg: var(--arhix-canvas-dark);
}

[data-ui-theme-scope="dark"] {
  color-scheme: dark;
  --arhix-surface-raised: #292929;
  --arhix-surface: #333;
  --arhix-surface-soft: #2e2e30;
  --arhix-surface-sunken: #3a3a3a;
  --arhix-surface-pill: #454545;
  --arhix-line: #383838;
  --arhix-island-border: rgb(255 255 255 / 6%);
  --arhix-ink: #e2e2e2;
  --arhix-ink-active: #c8c9cd;
  --arhix-ink-muted: #9a9ca3;
  --arhix-ink-faint: #6e7076;
  --arhix-ink-ghost: #55575c;
  --arhix-scene-card-ink: #fff;
  --arhix-accent: #6ea8ff;
  --arhix-accent-tint: rgb(78 144 246 / 18%);
  --arhix-mark-problem: #ff6b6b;
  --arhix-status-neutral-tint: rgb(154 156 163 / 16%);
  --arhix-status-success: #67c78f;
  --arhix-status-success-tint: rgb(103 199 143 / 16%);
  --arhix-status-warning: #f0bd62;
  --arhix-status-warning-tint: rgb(240 189 98 / 16%);
  --arhix-status-warning-soft: rgb(240 189 98 / 10%);
  --arhix-status-error: #ff7f7f;
  --arhix-icon-secondary: #3f4045;
  --arhix-workspace-backdrop: var(--arhix-canvas-dark);
  --arhix-shadow-island:
    0 0 0 0.5px rgb(0 0 0 / 60%),
    0 1px 3px rgb(0 0 0 / 45%),
    0 8px 24px rgb(0 0 0 / 45%);
  --arhix-shadow-pill:
    inset 0 0 0 1px rgb(255 255 255 / 7%),
    0 1px 3px rgb(0 0 0 / 50%);
  --arhix-shadow-pill-pressed: 0 1px 2px rgb(0 0 0 / 28%);
}

[data-ui-canvas-theme="dark"] {
  --arhix-canvas: var(--arhix-canvas-dark);
  --arhix-canvas-ink: #fff;
  --arhix-canvas-text-placeholder: #353638;
  --arhix-drawing-preview-bg: var(--arhix-canvas);
  --arhix-drawing-preview-ink: #fff;
  --arhix-viewport-3d-backdrop: var(--arhix-canvas-dark);
  --arhix-viewport-3d-grid-center: #6e7076;
  --arhix-viewport-3d-grid: #3f4045;
  --arhix-viewport-3d-shadow-color: #000;
  --arhix-viewport-3d-shadow-opacity: 0.09;
  --arhix-viewport-3d-theme-key: dark;
}

[data-ui-canvas-theme="light"] {
  --arhix-viewport-3d-backdrop: #f5f6f7;
  --arhix-viewport-3d-grid-center: #aaa;
  --arhix-viewport-3d-grid: #ddd;
  --arhix-viewport-3d-shadow-color: #000;
  --arhix-viewport-3d-shadow-opacity: 0.09;
  --arhix-viewport-3d-theme-key: light;
}