@scope {
  :scope {
    --font-ui:
      "Source Sans 3", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
    --font-display:
      "Source Sans 3", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
    --font-mono:
      "JetBrains Mono", "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  }
}

/* Violet + limestone foundations. Components consume the semantic roles below. */
@scope {
  :scope {
    --gray-1000: #0d1016;
    --gray-950: #11141b;
    --gray-900: #151820;
    --gray-850: #1a1e27;
    --gray-800: #1e222c;
    --gray-750: #242936;
    --gray-700: #2a303e;
    --gray-650: #333a49;
    --gray-600: #3b4354;
    --gray-550: #465063;
    --gray-500: #596477;
    --gray-450: #6d788c;
    --gray-400: #828da0;
    --gray-350: #98a1b0;
    --gray-300: #a5adba;
    --gray-250: #c5cbd5;
    --gray-200: #d9dfeb;
    --gray-150: #e3e8f0;
    --gray-100: #e8edf5;
    --gray-80: #edf1f7;
    --gray-60: #f0f4fc;
    --gray-40: #f4f7fb;
    --gray-20: #f7f9fc;
    --gray-0: #ffffff;
    --gray-input-border: #cbd3e1;
    --gray-ink: #151821;
    --gray-ink-2: #626a79;

    --blue-700: #1746b8;
    --blue-600: #2864f0;
    --blue-500: #3b73f5;
    --blue-400: #5b8af8;
    --blue-300: #74a0ff;
    --blue-200: #b5caff;
    --blue-100: #dbe5ff;
    --selection-dark: #202e4e;
    --selection-light: #eaf0ff;

    /* Semantic hues */
    --red-600: #c93651;
    --red-500: #f0526b;
    --red-400: #ff7d91;
    --amber-700: #9a6700;
    --amber-600: #d97706;
    --amber-500: #f4b860;
    --green-700: #007a69;
    --green-600: #008f7a;
    --green-500: #00a98f;
    --green-400: #48d4bd;
    --purple-500: #6d5bd0;
    --purple-400: #a69cff;

    /* Syntax — Dark+ */
    --dp-keyword: #569cd6;
    --dp-control: #c586c0;
    --dp-string: #ce9178;
    --dp-number: #b5cea8;
    --dp-comment: #6a9955;
    --dp-function: #dcdcaa;
    --dp-type: #4ec9b0;
    --dp-variable: #9cdcfe;
    --dp-constant: #4fc1ff;
    --dp-tag: #569cd6;
    --dp-attribute: #9cdcfe;
    --dp-operator: #d4d4d4;

    /* Syntax — Light+ */
    --lp-keyword: #0000ff;
    --lp-control: #af00db;
    --lp-string: #a31515;
    --lp-number: #098658;
    --lp-comment: #008000;
    --lp-function: #795e26;
    --lp-type: #267f99;
    --lp-variable: #001080;
    --lp-constant: #0070c1;
    --lp-tag: #800000;
    --lp-attribute: #e50000;
    --lp-operator: #000000;
  }
}

/* Native Light+/Dark+ semantic values. light-dark() receives light first, dark second. */
@scope {
  :scope {
    --brand-center: light-dark(#5b3abf, #a98ae8);
    --brand-edge: light-dark(#9670d8, #cbb9ff);
    --accent: light-dark(#5b3abf, #cbb9ff);
    --accent-hover: light-dark(#6c49cc, #ddd1ff);
    --accent-press: light-dark(#472a9b, #b49ae8);
    --accent-subtle: light-dark(#e6e0f3, #383143);
    --accent-text: light-dark(#5b3abf, #cbb9ff);
    --background-color: light-dark(#f3f1e8, #201f23);
    --border-default: light-dark(#c9c5ce, #514b59);
    --border-focus: light-dark(#7650bd, #cbb9ff);
    --border-input: light-dark(#857d93, #9d92ac);
    --border-strong: light-dark(#857d93, #9d92ac);
    --border-subtle: light-dark(#e0dcdf, #3b373f);
    --comment-highlight: light-dark(#bf88032e, #cca70033);
    --comment-highlight-active: light-dark(#bf880347, #cca7004d);
    --comment-rail: light-dark(var(--amber-700), var(--amber-600));
    --diff-added-bg: light-dark(#00a98f1f, #48d4bd24);
    --diff-added-text: light-dark(var(--green-700), var(--green-400));
    --diff-modified: light-dark(#9a6700, var(--amber-500));
    --diff-removed-bg: light-dark(#f0526b1f, #ff7d9129);
    --diff-removed-text: light-dark(var(--red-600), var(--red-400));
    --scrollbar-thumb: light-dark(#857d93, #9d92ac);
    --scrollbar-thumb-hover: light-dark(#646464b3, #797979b3);
    --status-error: light-dark(var(--red-600), var(--red-400));
    --status-error-bg: light-dark(#f0526b14, #ff7d9124);
    --status-info: light-dark(var(--blue-400), var(--blue-300));
    --status-info-bg: light-dark(#2864f014, #74a0ff24);
    --status-success: light-dark(var(--green-700), var(--green-400));
    --status-success-bg: light-dark(#00a98f14, #48d4bd24);
    --status-warning: light-dark(var(--amber-700), var(--amber-500));
    --status-warning-bg: light-dark(#f4b86018, #f4b86022);
    --surface-active: light-dark(#dbd2eb, #453951);
    --surface-card: light-dark(#fdfbf5, #2a272f);
    --surface-editor: light-dark(#f3f1e8, #201f23);
    --surface-hover: light-dark(#ebe6ed, #342f3b);
    --surface-inline-code: light-dark(#ebe6ed, #342f3b);
    --surface-input: light-dark(#fdfbf5, #29272e);
    --surface-overlay: light-dark(#fdfbf5, #312d38);
    --surface-panel: light-dark(#fdfbf5, #2a272f);
    --surface-raised: light-dark(#fdfbf5, #312d38);
    --surface-scrim: light-dark(#2927325c, #000000a3);
    --surface-selected: light-dark(#e6e0f3, #383143);
    --surface-sidebar: light-dark(#eae7df, #29272e);
    --surface-statusbar: light-dark(#eae7df, #29272e);
    --surface-titlebar: light-dark(#eae7df, #29272e);
    --syntax-attribute: light-dark(var(--lp-attribute), var(--dp-attribute));
    --syntax-comment: light-dark(var(--lp-comment), var(--dp-comment));
    --syntax-constant: light-dark(var(--lp-constant), var(--dp-constant));
    --syntax-control: light-dark(var(--lp-control), var(--dp-control));
    --syntax-function: light-dark(var(--lp-function), var(--dp-function));
    --syntax-keyword: light-dark(var(--lp-keyword), var(--dp-keyword));
    --syntax-number: light-dark(var(--lp-number), var(--dp-number));
    --syntax-operator: light-dark(var(--lp-operator), var(--dp-operator));
    --syntax-string: light-dark(var(--lp-string), var(--dp-string));
    --syntax-tag: light-dark(var(--lp-tag), var(--dp-tag));
    --syntax-type: light-dark(var(--lp-type), var(--dp-type));
    --syntax-variable: light-dark(var(--lp-variable), var(--dp-variable));
    --text-code: light-dark(#292732, #f3f1e8);
    --text-inverse: light-dark(var(--gray-0), var(--gray-0));
    --text-link: light-dark(#5b3abf, #cbb9ff);
    --text-link-hover: light-dark(#472a9b, #ddd1ff);
    --text-muted: light-dark(#625e6b, #b5b0bf);
    --text-on-accent: light-dark(#fdfbf5, #292732);
    --text-primary: light-dark(#292732, #f3f1e8);
    --text-secondary: light-dark(#55525f, #ccc7d5);
    --workflow-approved: light-dark(var(--green-700), var(--green-400));
    --workflow-approved-bg: light-dark(#00a98f14, #48d4bd24);
    --workflow-changes: light-dark(var(--red-600), var(--red-400));
    --workflow-changes-bg: light-dark(#f0526b14, #ff7d9124);
    --workflow-draft: light-dark(var(--gray-ink-2), var(--gray-300));
    --workflow-draft-bg: light-dark(#6161611a, #9d9d9d26);
    --workflow-published: light-dark(var(--blue-600), var(--blue-300));
    --workflow-published-bg: light-dark(#2864f014, #74a0ff24);
    --workflow-review: light-dark(var(--amber-700), var(--amber-600));
    --workflow-review-bg: light-dark(#bf88031a, #cca70026);
    --workflow-scheduled: light-dark(var(--purple-500), var(--purple-400));
    --workflow-scheduled-bg: light-dark(#6d5bd014, #a69cff24);
  }
}

/* Shared button presentation roles. Elements keep ownership of their structure and states. */
@scope {
  :scope {
    --button-font: var(--type-ui-strong);
    --button-min-block-size: var(--h-control);
    --button-padding-block: var(--space-4);
    --button-padding-inline: var(--space-6);
    --button-background: transparent;
    --button-background-hover: var(--surface-hover);
    --button-background-active: var(--surface-active);
    --button-border-color: var(--border-default);
    --button-border-color-hover: var(--border-strong);
    --button-border-color-active: var(--border-strong);
    --button-color: var(--text-primary);
  }
}

/* Type scale. Editor-tool density: 13px is the UI baseline, not 16px. */
@scope {
  :scope {
    --text-2xs: 10px;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-ui: 13px; /* default UI + control label size */
    --text-md: 14px; /* editor body / long-form reading */
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 32px;
    --text-5xl: 40px;
    --text-6xl: 56px;

    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-ui: 1.4;
    --leading-body: 1.55;
    --leading-code: 1.5;
    --leading-loose: 1.7;

    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --tracking-tight: -0.02em;
    --tracking-snug: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    --tracking-caps: 0.08em;

    /* Composite roles */
    --type-display: var(--weight-semibold) var(--text-4xl)/var(--leading-tight)
      var(--font-display);
    --type-title: var(--weight-semibold) var(--text-2xl)/var(--leading-snug)
      var(--font-display);
    --type-heading: var(--weight-semibold) var(--text-lg)/var(--leading-snug)
      var(--font-ui);
    --type-ui: var(--weight-regular) var(--text-ui)/var(--leading-ui)
      var(--font-ui);
    --type-ui-strong: var(--weight-semibold) var(--text-ui)/var(--leading-ui)
      var(--font-ui);
    --type-body: var(--weight-regular) var(--text-md)/var(--leading-body)
      var(--font-ui);
    --type-caption: var(--weight-regular) var(--text-xs)/var(--leading-ui)
      var(--font-ui);
    --type-code: var(--weight-regular) var(--text-sm)/var(--leading-code)
      var(--font-mono);
    --type-code-editor: var(--weight-regular) var(--text-md)/var(--leading-code)
      var(--font-mono);
  }
}

/* Spacing. 2px base step; editor chrome uses tight steps (2-8), content areas 12-32. */
@scope {
  :scope {
    --space-0: 0;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 6px;
    --space-4: 8px;
    --space-5: 10px;
    --space-6: 12px;
    --space-7: 16px;
    --space-8: 20px;
    --space-9: 24px;
    --space-10: 32px;
    --space-11: 40px;
    --space-12: 48px;
    --space-13: 64px;
    --space-14: 80px;

    /* Roles */
    --pad-control-x: var(--space-6);
    --pad-control-y: var(--space-2);
    --pad-card: var(--space-7);
    --pad-panel: var(--space-6);
    --pad-row-x: var(--space-5);
    --gap-inline: var(--space-4);
    --gap-stack: var(--space-6);
    --gap-section: var(--space-10);
  }
}

/* Canvas authoring widths. Ordered from the narrowest supported layout to the widest. */
@scope {
  :scope {
    --canvas-widths: 320px 390px 768px 1024px 1200px 1280px 1440px;
  }
}

/* Corner radii + border widths. Editor chrome is nearly square; content cards soften slightly. */
@scope {
  :scope {
    --radius-none: 0;
    --radius-xs: 2px; /* buttons, inputs, chrome controls */
    --radius-sm: 4px; /* menus, popovers, badges */
    --radius-md: 6px; /* cards, comment bubbles */
    --radius-lg: 8px; /* dialogs, media thumbs */
    --radius-pill: 999px;

    --border-style: solid;
    --border-width: 1px;
    --border-width-thick: 2px;
    --rail-width: 2px; /* left rail on comment threads / active list rows */
    --focus-ring-width: 1px;
    --focus-ring-offset: 0px;
  }
}

/* Elevation. Editor UI is flat; shadow appears only on things that float
   above the workbench (menus, popovers, dialogs, drag ghosts). */
@scope {
  :scope {
    --shadow-none: none;
    --shadow-row: 0 1px 0 0 var(--border-subtle);
    --shadow-widget: 0 2px 8px light-dark(#00000026, #00000047); /* suggest widgets */
    --shadow-menu: 0 4px 12px light-dark(#0000002e, #0000005c); /* menus, dropdowns */
    --shadow-dialog: 0 12px 32px light-dark(#00000033, #00000070); /* dialogs */
    --shadow-drag: 0 8px 20px light-dark(#00000038, #00000080); /* drag ghost */
    --scrim: var(--surface-scrim);
    --blur-overlay: blur(2px); /* @kind other */
  }
}

/* Motion. Short, linear-ish, no bounce. UI state changes are near-instant;
   only things that enter or leave the screen animate. */
@scope {
  :scope {
    --dur-instant: 0ms; /* @kind other */
    /* hover, press, focus */
    --dur-fast: 80ms; /* @kind other */
    /* menus, tooltips, badges */
    --dur-base: 120ms; /* @kind other */
    /* dialogs, panel slide, toast */
    --dur-slow: 200ms; /* @kind other */
    /* full-panel transitions only */
    --dur-slowest: 320ms; /* @kind other */

    --ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9); /* @kind other */
    --ease-out: cubic-bezier(0, 0, 0.38, 0.9); /* @kind other */
    --ease-in: cubic-bezier(0.2, 0, 1, 0.9); /* @kind other */
    --ease-linear: linear; /* @kind other */

    --transition-control:
      background-color var(--dur-fast) var(--ease-standard),
      border-color var(--dur-fast) var(--ease-standard),
      color var(--dur-fast) var(--ease-standard); /* @kind other */
    --transition-overlay:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out); /* @kind other */
  }
}

/* Workbench layout metrics. These are fixed chrome dimensions — copy them exactly. */
@scope {
  :scope {
    --h-titlebar: 35px;
    --h-tab: 35px;
    --h-statusbar: 22px;
    --h-toolbar: 30px;
    --h-row: 22px; /* tree / list row */
    --h-row-comfortable: 30px; /* content table row */
    --h-control-sm: 22px;
    --h-control: 26px;
    --h-control-lg: 30px;
    --w-activitybar: 48px;
    --w-sidebar: 300px;
    --w-sidebar-min: 220px;
    --w-panel-right: 340px; /* comments / review rail */
    --w-menu-min: 200px;
    --w-dialog-sm: 420px;
    --w-dialog: 560px;
    --w-dialog-lg: 720px;
    --size-icon-sm: 14px;
    --size-icon: 16px;
    --size-icon-lg: 20px;
    --size-avatar-sm: 20px;
    --size-avatar: 24px;
    --size-avatar-lg: 32px;
    --z-base: 0; /* @kind other */
    --z-sticky: 10; /* @kind other */
    --z-popover: 100; /* @kind other */
    --z-menu: 200; /* @kind other */
    --z-dialog: 300; /* @kind other */
    --z-toast: 400; /* @kind other */
  }
}