/* ============================================================
   @cloudlab/ui-vision — design tokens
   The CloudLab Designer language (commerce design-online page):
   rounded controls, cool blue-grey neutrals, sentence-case bold
   actions, hairline borders, soft layered shadows, blue #2d5096
   as the brand anchor — set in Cloudlab Sans.

   Radius rule (by request): every radius is HALF the Designer's.
     Designer buttons/controls 9px  -> 4.5px  (--cl-ctl-radius)
     Designer tiles / chips    6px  -> 3px    (--cl-radius-xs)
     Designer --clc-radius-sm 10px  -> 5px    (--cl-radius-sm)
     Designer --clc-radius-md 14px  -> 7px    (--cl-radius-md)
     Designer --clc-radius-lg 20px  -> 10px   (--cl-radius-lg)
     Designer --clc-radius-xl 24px  -> 12px   (--cl-radius-xl)
     pills / avatars / knobs        -> stay fully round
   ============================================================ */

.cl-vision {
  /* typography — Cloudlab Sans (brand) leads; Inter is the Designer's own face */
  --cl-font-sans:
    'Cloudlab Sans', 'Inter', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cl-font-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --cl-font-display: var(--cl-font-sans);
  --cl-text-xs: 12px;
  --cl-text-sm: 13px;
  --cl-text-md: 13.5px;
  --cl-text-lg: 16px;
  --cl-text-xl: 20px;
  --cl-text-2xl: 26px;
  --cl-leading: 1.5;
  --cl-tracking: -0.006em;
  --cl-heading-tracking: -0.02em;
  --cl-weight-normal: 400;
  --cl-weight-medium: 500;
  --cl-weight-semibold: 700; /* Cloudlab Sans ships 400/700 — the Designer's 600 lands on 700 */
  --cl-weight-bold: 700;
  /* buttons: the Designer's sentence-case 600 CTA voice */
  --cl-btn-weight: 700;
  --cl-btn-tracking: -0.01em;
  /* field labels: sentence case, semibold, muted */
  --cl-label-size: 13px;
  --cl-label-weight: 700;
  --cl-label-transform: none;
  --cl-label-tracking: 0;
  --cl-label-color: var(--cl-text-muted);

  /* spacing — 8px base, 4px half-step */
  --cl-sp-1: 4px;
  --cl-sp-2: 8px;
  --cl-sp-3: 12px;
  --cl-sp-4: 16px;
  --cl-sp-5: 20px;
  --cl-sp-6: 24px;
  --cl-sp-7: 32px;
  --cl-sp-8: 48px;

  /* radius — half the Designer's (see header) */
  --cl-radius-xs: 3px;
  --cl-radius-sm: 5px;
  --cl-radius-md: 7px;
  --cl-radius-lg: 10px;
  --cl-radius-xl: 12px;
  --cl-radius-full: 999px;
  --cl-ctl-radius: 4.5px;
  --cl-check-radius: 3px;

  /* controls — Designer: secondary 38px / primary CTA 40px, 13.5px text */
  --cl-ctl-h-xs: 26px;
  --cl-ctl-h-sm: 32px;
  --cl-ctl-h-md: 38px;
  --cl-ctl-h-lg: 42px;
  --cl-ctl-h-xl: 48px;
  --cl-ctl-px-xs: 8px;
  --cl-ctl-px-sm: 12px;
  --cl-ctl-px-md: 14px;
  --cl-ctl-px-lg: 16px;
  --cl-ctl-px-xl: 20px;
  --cl-ctl-text-xs: 12px;
  --cl-ctl-text-sm: 12.5px;
  --cl-ctl-text-md: 13.5px;
  --cl-ctl-text-lg: 14px;
  --cl-ctl-text-xl: 15px;
  --cl-ctl-gap: 8px;
  --cl-field-gap: 6px;
  --cl-disabled-opacity: 0.5;

  /* motion */
  --cl-dur-fast: 120ms;
  --cl-dur-base: 200ms;
  --cl-dur-slow: 300ms;
  --cl-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* z — panels teleport to <body> next to modal/drawer root layers, so a picker
     opened inside a dialog must outrank it; keep this order (layering.spec.ts) */
  --cl-z-modal: 1100;
  --cl-z-dropdown: 1200;
  --cl-z-toast: 1300;
  --cl-z-tooltip: 1400;

  /* shadows — the Designer's soft, low-alpha set */
  --cl-shadow-xs: 0 1px 2px rgb(20 27 45 / 0.05);
  --cl-shadow-sm: 0 1px 2px rgb(20 27 45 / 0.06);
  --cl-shadow-md: 0 6px 20px -10px rgb(20 27 45 / 0.12);
  --cl-shadow-lg: 0 20px 50px -24px rgb(30 51 99 / 0.28);
  --cl-shadow-panel: 0 8px 24px rgb(16 24 40 / 0.12);
  --cl-shadow-overlay: 0 24px 56px -12px rgb(16 24 40 / 0.28);

  /* palette — light: the Designer's cool blue-grey neutrals */
  --cl-bg: #eef0f5;
  --cl-surface: #ffffff;
  --cl-surface-2: #f7f8fb;
  --cl-surface-3: #eef0f5;
  --cl-panel: #ffffff;
  --cl-panel-bg: #fafbfd;
  --cl-panel-border: #e7eaf0;
  --cl-border: #e7eaf0;
  --cl-border-strong: #dde1ea;
  --cl-text: #141b2d;
  --cl-text-muted: #3a4256;
  --cl-text-subtle: #6b7488;

  /* brand */
  --cl-primary: #2d5096;
  --cl-primary-hover: #264280;
  --cl-primary-active: #1f3669;
  --cl-primary-contrast: #ffffff;
  --cl-primary-soft: #e6eaf2;
  --cl-primary-soft-text: #264280;
  --cl-accent: #3a63aa;
  --cl-accent-soft: #e7edf6;

  --cl-info: #1a73e8;
  --cl-info-soft: #e3eefc;
  --cl-info-soft-text: #1558b0;
  --cl-info-contrast: #ffffff;
  --cl-success: #43a047;
  --cl-success-soft: #e8f4e9;
  --cl-success-soft-text: #2e7d32;
  --cl-success-contrast: #ffffff;
  --cl-warning: #fb8c00;
  --cl-warning-soft: #fef1e0;
  --cl-warning-soft-text: #b26a00;
  --cl-warning-contrast: #ffffff;
  --cl-danger: #e53935;
  --cl-danger-hover: #c62828;
  --cl-danger-soft: #fce7e7;
  --cl-danger-soft-text: #c62828;
  --cl-danger-contrast: #ffffff;

  /* focus — soft rounded ring in the brand blue */
  --cl-focus-border: #2d5096;
  --cl-focus-ring: 0 0 0 3px rgb(45 80 150 / 0.22);
  --cl-focus-ring-danger: 0 0 0 3px rgb(229 57 53 / 0.22);
  --cl-focus-outline: 2px solid #2d5096;
  --cl-focus-outline-offset: 2px;

  /* inputs */
  --cl-input-bg: #ffffff;
  --cl-input-border: #dde1ea;
  --cl-input-placeholder: #6b7488;
  --cl-input-shadow: 0 1px 2px rgb(20 27 45 / 0.04);

  /* overlays */
  --cl-backdrop: rgb(20 27 45 / 0.45);
  --cl-tooltip-bg: #141b2d;
  --cl-tooltip-text: #ffffff;
  --cl-tooltip-radius: var(--cl-radius-sm);
  --cl-toast-radius: var(--cl-radius-md);
  --cl-overlay-radius: var(--cl-radius-lg);
  --cl-alert-radius: var(--cl-radius-md);

  /* panels & editor chrome */
  --cl-panel-pad: 4px;
  --cl-panel-radius: 5px;
  --cl-option-pad: 7px 10px;
  --cl-option-radius: 3px;
  --cl-card-pad: var(--cl-sp-5);
  --cl-card-radius: var(--cl-radius-md);
  --cl-card-shadow: var(--cl-shadow-sm);
  --cl-header-h: 56px;
  --cl-bottombar-h: 34px;
  --cl-toolbtn-md: 34px;
  --cl-toolbtn-sm: 28px;
  --cl-toolbtn-lg: 38px;
  --cl-toolbtn-icon: 16px;
  --cl-toolbtn-radius: var(--cl-ctl-radius);
  --cl-toolbar-radius: var(--cl-radius-md);
  --cl-commandbar-radius: var(--cl-radius-md);
  --cl-sidebar-item-radius: var(--cl-ctl-radius);
  --cl-inspector-row-h: 32px;
  --cl-proprow-label-w: 84px;
  --cl-layer-h: 30px;
  --cl-canvas-bg: #eef0f5;
  --cl-canvas-dot: #d5d9e3;
  --cl-canvas-dot-gap: 20px;
  /* inspector section titles: the Designer's "PREVIEW" / "YOUR DESIGN" micro-caps */
  --cl-inspector-title-size: 11px;
  --cl-inspector-title-transform: uppercase;
  --cl-inspector-title-tracking: 0.08em;
  --cl-inspector-title-color: var(--cl-text-subtle);

  /* segmented control — the Designer's grey track with a white active pill */
  --cl-seg-bg: var(--cl-surface-3);
  --cl-seg-border: transparent;
  --cl-seg-pad: 2px;
  --cl-seg-gap: 2px;
  --cl-seg-active-bg: var(--cl-surface);
  --cl-seg-active-text: var(--cl-primary);
  --cl-seg-active-shadow: 0 1px 2px rgb(20 26 40 / 0.06);

  /* tags & badges — badges/status stay pills; tags take the smallest corner */
  --cl-tag-radius: var(--cl-radius-xs);
  --cl-log-radius: var(--cl-radius-sm);

  /* tables — subtle head band, sentence case, hairline rows */
  --cl-row-h-comfortable: 44px;
  --cl-row-h-compact: 36px;
  --cl-row-h-dense: 30px;
  --cl-table-head-bg: var(--cl-surface-2);
  --cl-table-head-size: 12px;
  --cl-table-head-weight: var(--cl-weight-bold);
  --cl-table-head-tracking: 0;
  --cl-table-head-transform: none;
  --cl-table-head-text: var(--cl-text-muted);
  --cl-table-head-rule: 1px solid var(--cl-border-strong);
  --cl-table-stripe: #fafbfd;
  --cl-table-hover: #f3f5f9;

  /* buttons — primary carries the Designer's faint brand shadow;
     secondary is its white, hairline-bordered neighbour */
  --cl-btn-primary-shadow: 0 1px 3px -1px rgb(38 66 128 / 0.3);
  --cl-btn-secondary-bg: var(--cl-surface);
  --cl-btn-secondary-border: var(--cl-border-strong);
  --cl-btn-secondary-shadow: 0 1px 2px rgb(20 27 45 / 0.04);
  --cl-btn-secondary-hover-bg: var(--cl-surface-2);
  --cl-btn-secondary-active-bg: var(--cl-surface-3);

  /* log viewer */
  --cl-log-bg: #ffffff;
  --cl-log-fg: #3a4256;
  --cl-log-time: #6b7488;
}

/* ---------------- dark ----------------
   The Designer's backend dark tokens: a deep blue-grey (oklch 18.5% .014 265
   sidebar) with lifted #93aeda accents. The brand rule holds: #2d5096 primary
   with white text, lifted hovers on dark surfaces. */
:is(.dark, [data-cl-dark]) .cl-vision,
.cl-vision:is(.dark, [data-cl-dark]) {
  --cl-bg: #12151d;
  --cl-surface: #191c25;
  --cl-surface-2: #20242e;
  --cl-surface-3: #272c37;
  --cl-panel: #191c25;
  --cl-panel-bg: #15181f;
  --cl-panel-border: #262a34;
  --cl-border: #2a2f3a;
  --cl-border-strong: #383e4b;
  --cl-text: #e9edf5;
  --cl-text-muted: #a3abbd;
  --cl-text-subtle: #6b7488;

  --cl-primary: #2d5096;
  --cl-primary-hover: #3a61ae;
  --cl-primary-active: #26467f;
  --cl-primary-contrast: #ffffff;
  --cl-primary-soft: rgb(147 174 218 / 0.2);
  --cl-primary-soft-text: #bccde9;
  --cl-accent: #93aeda;
  --cl-accent-soft: rgb(147 174 218 / 0.16);

  --cl-info: #6fa3f0;
  --cl-info-soft: rgb(111 163 240 / 0.16);
  --cl-info-soft-text: #b7d0f7;
  --cl-success: #66bb6a;
  --cl-success-soft: rgb(102 187 106 / 0.16);
  --cl-success-soft-text: #a5d6a7;
  --cl-warning: #ffa726;
  --cl-warning-soft: rgb(255 167 38 / 0.16);
  --cl-warning-soft-text: #ffcc80;
  --cl-danger: #ef5350;
  --cl-danger-hover: #f27573;
  --cl-danger-soft: rgb(239 83 80 / 0.16);
  --cl-danger-soft-text: #f6a5a3;

  --cl-focus-border: #93aeda;
  --cl-focus-ring: 0 0 0 3px rgb(147 174 218 / 0.35);
  --cl-focus-ring-danger: 0 0 0 3px rgb(239 83 80 / 0.3);
  --cl-focus-outline: 2px solid #93aeda;

  --cl-input-bg: #15181f;
  --cl-input-border: #383e4b;
  --cl-input-placeholder: #7a8397;
  --cl-input-shadow: none;

  --cl-backdrop: rgb(0 0 0 / 0.6);
  --cl-tooltip-bg: #e9edf5;
  --cl-tooltip-text: #141b2d;

  --cl-canvas-bg: #0f1218;
  --cl-canvas-dot: #2a2f3a;

  --cl-table-head-bg: var(--cl-surface-2);
  --cl-table-head-rule: 1px solid var(--cl-border-strong);
  --cl-table-stripe: #171a22;
  --cl-table-hover: #1e222c;

  --cl-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --cl-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --cl-shadow-md: 0 6px 20px -10px rgb(0 0 0 / 0.55);
  --cl-shadow-lg: 0 20px 50px -24px rgb(0 0 0 / 0.7);
  --cl-shadow-panel: 0 8px 24px rgb(0 0 0 / 0.55);
  --cl-shadow-overlay: 0 24px 56px -12px rgb(0 0 0 / 0.7);

  --cl-btn-primary-shadow: 0 1px 3px -1px rgb(147 174 218 / 0.35);
  --cl-btn-secondary-shadow: none;
  --cl-seg-active-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  --cl-card-shadow: none;

  --cl-log-bg: #12151d;
  --cl-log-fg: #b5bccb;
  --cl-log-time: #6b7488;
  --cl-log-border: #262a34;
  --cl-log-toolbar-bg: #171a22;
  --cl-log-line-hover: rgb(255 255 255 / 0.04);

  --cl-skeleton-bg: #262a34;
  --cl-skeleton-shine: rgb(255 255 255 / 0.06);
  --cl-switch-thumb: #e9edf5;
}