/* Fonts. */
@scope (:root) {
  :scope {
    --font-ui:
      "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", sans-serif;
    --font-display:
      "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
      "Segoe UI", sans-serif;
    --font-mono: "Platform JetBrains Mono", "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  }
}

/* Palette. */
@scope (:root) {
  :scope {
    --gray-1000: #10141c;
    --gray-0: #ffffff;
    --purple-500: #6e56cf;
  }
}

/* Semantic Light+/Dark+ theme. */
@scope (:root) {
  :scope {
    --brand-center: light-dark(#1c57ca, #93b9ff);
    --brand-edge: light-dark(#568cf1, #b2cdff);
    --accent: light-dark(#1c57ca, #93b9ff);
    --accent-hover: light-dark(#2b67dc, #b2cdff);
    --accent-press: light-dark(#0d43aa, #78a2ee);
    --accent-subtle: light-dark(#d7e2f4, #293346);
    --accent-text: light-dark(#1c57ca, #93b9ff);
    --background-color: light-dark(#eef1f5, #14171d);
    --border-default: light-dark(#c4c8cc, #42474d);
    --border-focus: light-dark(#3474f1, #568efa);
    --border-input: light-dark(#76808e, #9299a3);
    --border-strong: light-dark(#76808e, #9299a3);
    --border-subtle: light-dark(#dce0e3, #2d3137);
    --diff-modified: light-dark(#8a4b08, #f1c16d);
    --folder-surface: light-dark(#e3e8ec, #1b1f25);
    --scrollbar-thumb: light-dark(#76808e, #9299a3);
    --status-error: light-dark(#b42332, #ff9aa4);
    --status-error-bg: light-dark(#fcedef, #42262d);
    --status-info: light-dark(#1d4ed8, #bdd2ff);
    --status-info-bg: light-dark(#e8efff, #22365b);
    --status-success: light-dark(#16643c, #80d8a7);
    --status-success-bg: light-dark(#eaf5ee, #193829);
    --status-warning: light-dark(#8a4b08, #f1c16d);
    --status-warning-bg: light-dark(#fff3dc, #40321d);
    --surface-active: light-dark(#c8d6f0, #323f57);
    --surface-card: light-dark(#fbfcfe, #1c2025);
    --surface-editor: light-dark(#f5f7fa, #14171d);
    --surface-hover: light-dark(#dde2e6, #2b3037);
    --surface-inline-code: light-dark(#dde2e6, #2b3037);
    --surface-input: light-dark(#fbfcfe, #1b1f25);
    --surface-overlay: light-dark(#fbfcfe, #22272d);
    --surface-panel: light-dark(#fbfcfe, #1c2025);
    --surface-raised: light-dark(#fbfcfe, #22272d);
    --surface-scrim: light-dark(#2329335c, #000000a3);
    --surface-selected: light-dark(#d7e2f4, #293346);
    --surface-sidebar: light-dark(#e3e8ec, #1b1f25);
    --surface-statusbar: light-dark(#e3e8ec, #1b1f25);
    --surface-titlebar: light-dark(#e3e8ec, #1b1f25);
    --text-code: light-dark(#232933, #ecf1f5);
    --text-inverse: light-dark(#ffffff, #ffffff);
    --text-link: light-dark(#1c57ca, #93b9ff);
    --text-link-hover: light-dark(#0d43aa, #78a2ee);
    --text-muted: light-dark(#555c65, #b2b6bb);
    --text-on-accent: light-dark(#fbfcfe, #14171d);
    --text-primary: light-dark(#232933, #ecf1f5);
    --text-secondary: light-dark(#4c545e, #c8cdd1);
    --workflow-approved: light-dark(#16643c, #80d8a7);
    --workflow-approved-bg: light-dark(#eaf5ee, #193829);
    --workflow-changes: light-dark(#b42332, #ff9aa4);
    --workflow-changes-bg: light-dark(#fcedef, #42262d);
    --workflow-draft: light-dark(#485364, #c3cad5);
    --workflow-draft-bg: light-dark(#e9ecf1, #2c333e);
    --workflow-review: light-dark(#8a4b08, #f1c16d);
    --workflow-review-bg: light-dark(#fff3dc, #40321d);
  }
}

/* Button presentation. */
@scope (:root) {
  :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);
  }
}

/* Typography. */
@scope (:root) {
  :scope {
    --text-xs: 12px;
    --text-sm: 13px;
    --text-ui: 14px;
    --text-md: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;
    --text-4xl: 36px;
    --text-5xl: 44px;
    --text-6xl: 60px;
    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-ui: 1.35;
    --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.025em;
    --tracking-snug: -0.012em;
    --tracking-normal: 0;
    --tracking-wide: 0.02em;
    --tracking-caps: 0.08em;
    --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. */
@scope (:root) {
  :scope {
    --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;
    --pad-control-x: var(--space-6);
    --gap-inline: var(--space-4);
  }
}

/* Canvas. */
@scope (:root) {
  :scope {
    --canvas-widths: 320px 390px 768px 1024px 1200px 1280px 1440px;
  }
}

/* Radius and borders. */
@scope (:root) {
  :scope {
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --border-style: solid;
    --border-width: 1px;
    --border-width-thick: 2px;
    --rail-width: 2px;
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
  }
}

/* Elevation. */
@scope (:root) {
  :scope {
    --shadow-row: 0 1px 2px light-dark(#2329330a, #0000003d);
    --shadow-widget:
      0 8px 24px light-dark(#2329331a, #00000052), inset 0 1px 0 light-dark(#ffffffd9, #ffffff1a);
    --shadow-menu:
      0 12px 32px light-dark(#23293324, #00000070), inset 0 1px 0 light-dark(#ffffffd9, #ffffff1a);
    --shadow-dialog:
      0 24px 64px light-dark(#2329332e, #00000080), inset 0 1px 0 light-dark(#ffffffe6, #ffffff1f);
    --shadow-drag: 0 16px 40px light-dark(#23293333, #0000008f);
    --scrim: var(--surface-scrim);
    --blur-overlay: blur(16px) saturate(1.2); /* @kind other */
  }
}

/* Platform surface treatment, layered over semantic background colors. */
@scope (:root) {
  :scope {
    --surface-gradient: linear-gradient(
      160deg,
      light-dark(#ffffff33, #ffffff08),
      light-dark(#ffffff00, #ffffff00) 48%,
      light-dark(#ffffff00, #ffffff00)
    ); /* @kind other */
    --surface-glow:
      radial-gradient(
        70% 60% at 100% 0%,
        light-dark(#f2cc7e4d, #e7b55138),
        light-dark(#f2cc7e22, #e7b55124) 40%,
        transparent 72%
      ),
      radial-gradient(55% 50% at 0% 100%, light-dark(#f2cc7e26, #e7b5511f), transparent 70%); /* @kind other */
  }
}

/* Motion. */
@scope (:root) {
  :scope {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast: 80ms; /* @kind other */
    --dur-base: 120ms; /* @kind other */
    --dur-slow: 200ms; /* @kind other */
    --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 */
    --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 */
  }
}

/* Layout. */
@scope (:root) {
  :scope {
    --h-titlebar: 42px;
    --h-statusbar: 24px;
    --h-toolbar: 34px;
    --h-row: 26px;
    --h-row-comfortable: 34px;
    --h-control-sm: 26px;
    --h-control: 32px;
    --h-control-lg: 36px;
    --w-activitybar: 48px;
    --w-sidebar-min: 220px;
    --w-panel-right: 340px;
    --w-menu-min: 200px;
    --size-icon-sm: 14px;
    --size-icon: 16px;
    --size-icon-lg: 20px;
    --z-sticky: 10; /* @kind other */
    --z-popover: 100; /* @kind other */
  }
}