/*
 * Dazzle design tokens.
 *
 * Colour, type, spacing and motion values follow IBM Carbon (v11): the White
 * theme for light appearance and the Gray 100 theme for dark appearance.
 * Carbon’s blue is replaced by the Dazzle app’s own accent colour, and every
 * interactive colour is derived from that one value.
 * Every font is the operating system's own sans-serif; Carbon's IBM Plex is
 * deliberately not used. See DESIGN.md for the rules these tokens serve.
 */

:root {
  color-scheme: light dark;

  /* Type: the OS system font only. Never add a family to this stack. */
  --ds-font: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Carbon productive type scale. Letter-spacing is always 0. */
  --ds-type-caption: 400 12px/16px var(--ds-font);
  --ds-type-label: 400 12px/16px var(--ds-font);
  --ds-type-body-compact: 400 13px/18px var(--ds-font);
  --ds-type-body: 400 14px/20px var(--ds-font);
  --ds-type-heading-compact: 600 13px/18px var(--ds-font);
  --ds-type-heading-02: 600 16px/22px var(--ds-font);
  --ds-type-heading-03: 400 20px/28px var(--ds-font);
  --ds-type-heading-04: 400 28px/36px var(--ds-font);

  /*
   * The code editor's text, and only that: the system's monospaced face, as
   * the Apple apps' code editor sets source code. Never used for UI text.
   */
  --ds-font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ds-type-code: 400 13px/20px var(--ds-font-code);

  /* Carbon spacing scale (2× grid). */
  --ds-spacing-01: 2px;
  --ds-spacing-02: 4px;
  --ds-spacing-03: 8px;
  --ds-spacing-04: 12px;
  --ds-spacing-05: 16px;
  --ds-spacing-06: 24px;
  --ds-spacing-07: 32px;
  --ds-spacing-08: 40px;
  --ds-spacing-09: 48px;

  /* Control heights. Desktop-dense: 24 for toolbars and inspectors, 32 default. */
  --ds-control-xs: 24px;
  --ds-control-sm: 32px;
  --ds-control-md: 40px;
  --ds-toolbar-height: 48px;

  /* Carbon is square. Only checkboxes, radios and switches round off. */
  --ds-radius: 0;
  --ds-radius-checkbox: 2px;
  --ds-radius-round: 999px;

  /* Carbon motion. */
  --ds-duration-fast-01: 70ms;
  --ds-duration-fast-02: 110ms;
  --ds-duration-moderate-01: 150ms;
  --ds-duration-moderate-02: 240ms;
  --ds-ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ds-ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);
  --ds-ease-exit: cubic-bezier(0.2, 0, 1, 0.9);

  /* Elevation: one shadow, for things that float above the window. */
  --ds-shadow-float: 0 2px 6px rgba(0, 0, 0, 0.3);

  /*
   * The app's accent colour. Must match
   * Shared/Resources/Assets.xcassets/AccentColor.colorset (lint.mjs checks it).
   * Shades are mixed from it so changing the colour set changes the whole UI.
   * --ds-accent-strong is the fill behind white text (5.4:1 for the current orange).
   */
  --ds-accent: #e8612e;
  --ds-accent-strong: color-mix(in srgb, var(--ds-accent) 75%, #000);

  /* ---- Light appearance: Carbon White theme ---- */
  --ds-background: #ffffff;
  --ds-background-hover: rgba(141, 141, 141, 0.12);
  --ds-background-active: rgba(141, 141, 141, 0.5);
  --ds-background-selected: rgba(141, 141, 141, 0.2);
  --ds-background-inverse: #393939;
  --ds-background-inverse-hover: #474747;
  --ds-layer-01: #f4f4f4;
  --ds-layer-hover-01: #e8e8e8;
  --ds-layer-active-01: #c6c6c6;
  --ds-layer-selected-01: #e0e0e0;
  --ds-layer-02: #ffffff;
  --ds-layer-hover-02: #e8e8e8;
  --ds-layer-accent-01: #e0e0e0;
  --ds-field-01: #f4f4f4;
  --ds-field-hover-01: #e8e8e8;
  --ds-field-02: #ffffff;
  --ds-border-subtle-00: #e0e0e0;
  --ds-border-subtle-01: #c6c6c6;
  --ds-border-strong-01: #8d8d8d;
  --ds-border-interactive: var(--ds-accent);
  --ds-border-disabled: #c6c6c6;
  --ds-text-primary: #161616;
  --ds-text-secondary: #525252;
  --ds-text-helper: #6f6f6f;
  --ds-text-placeholder: rgba(22, 22, 22, 0.4);
  --ds-text-on-color: #ffffff;
  --ds-text-inverse: #ffffff;
  --ds-text-disabled: rgba(22, 22, 22, 0.25);
  --ds-text-error: #da1e28;
  --ds-link-primary: var(--ds-accent-strong);
  --ds-link-primary-hover: color-mix(in srgb, var(--ds-accent) 60%, #000);
  --ds-icon-primary: #161616;
  --ds-icon-secondary: #525252;
  --ds-icon-on-color: #ffffff;
  --ds-icon-disabled: rgba(22, 22, 22, 0.25);
  --ds-interactive: var(--ds-accent);
  --ds-focus: var(--ds-accent);
  --ds-focus-inset: #ffffff;
  --ds-highlight: color-mix(in srgb, var(--ds-accent) 20%, #fff);
  --ds-button-primary: var(--ds-accent-strong);
  --ds-button-primary-hover: color-mix(in srgb, var(--ds-accent) 66%, #000);
  --ds-button-primary-active: color-mix(in srgb, var(--ds-accent) 50%, #000);
  --ds-button-secondary: #393939;
  --ds-button-secondary-hover: #474747;
  --ds-button-secondary-active: #6f6f6f;
  --ds-button-danger: #da1e28;
  --ds-button-danger-hover: #b81921;
  --ds-button-danger-active: #750e13;
  --ds-button-disabled: #c6c6c6;
  --ds-support-error: #da1e28;
  --ds-support-success: #24a148;
  --ds-support-warning: #f1c21b;
  --ds-support-info: #0043ce;
  --ds-notification-error: #fff1f1;
  --ds-notification-success: #defbe6;
  --ds-notification-warning: #fcf4d6;
  --ds-notification-info: #edf5ff;
  --ds-overlay: rgba(22, 22, 22, 0.5);
  --ds-skeleton: #e8e8e8;

  /* Pages: paper on a canvas, as the Apple apps lay them out, and the code editor's gutter. */
  --ds-page: #ffffff;
  --ds-page-canvas: #e8e8e8;
  --ds-page-border: #c6c6c6;
  --ds-code-gutter: #f4f4f4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ds-background: #161616;
    --ds-background-hover: rgba(141, 141, 141, 0.16);
    --ds-background-active: rgba(141, 141, 141, 0.4);
    --ds-background-selected: rgba(141, 141, 141, 0.24);
    --ds-background-inverse: #f4f4f4;
    --ds-background-inverse-hover: #e8e8e8;
    --ds-layer-01: #262626;
    --ds-layer-hover-01: #333333;
    --ds-layer-active-01: #525252;
    --ds-layer-selected-01: #393939;
    --ds-layer-02: #393939;
    --ds-layer-hover-02: #474747;
    --ds-layer-accent-01: #393939;
    --ds-field-01: #262626;
    --ds-field-hover-01: #333333;
    --ds-field-02: #393939;
    --ds-border-subtle-00: #393939;
    --ds-border-subtle-01: #525252;
    --ds-border-strong-01: #8d8d8d;
    --ds-border-interactive: var(--ds-accent);
    --ds-border-disabled: rgba(141, 141, 141, 0.5);
    --ds-text-primary: #f4f4f4;
    --ds-text-secondary: #c6c6c6;
    --ds-text-helper: #a8a8a8;
    --ds-text-placeholder: rgba(244, 244, 244, 0.4);
    --ds-text-on-color: #ffffff;
    --ds-text-inverse: #161616;
    --ds-text-disabled: rgba(244, 244, 244, 0.25);
    --ds-text-error: #ff8389;
    --ds-link-primary: color-mix(in srgb, var(--ds-accent) 70%, #fff);
    --ds-link-primary-hover: color-mix(in srgb, var(--ds-accent) 55%, #fff);
    --ds-icon-primary: #f4f4f4;
    --ds-icon-secondary: #c6c6c6;
    --ds-icon-on-color: #ffffff;
    --ds-icon-disabled: rgba(244, 244, 244, 0.25);
    --ds-interactive: var(--ds-accent);
    --ds-focus: var(--ds-accent);
    --ds-focus-inset: #161616;
    --ds-highlight: color-mix(in srgb, var(--ds-accent) 35%, #161616);
    --ds-button-primary: var(--ds-accent-strong);
    --ds-button-primary-hover: color-mix(in srgb, var(--ds-accent) 66%, #000);
    --ds-button-primary-active: color-mix(in srgb, var(--ds-accent) 50%, #000);
    --ds-button-secondary: #6f6f6f;
    --ds-button-secondary-hover: #5e5e5e;
    --ds-button-secondary-active: #393939;
    --ds-button-danger: #da1e28;
    --ds-button-danger-hover: #b81921;
    --ds-button-danger-active: #750e13;
    --ds-button-disabled: rgba(141, 141, 141, 0.3);
    --ds-support-error: #fa4d56;
    --ds-support-success: #42be65;
    --ds-support-warning: #f1c21b;
    --ds-support-info: #4589ff;
    --ds-notification-error: #3b1416;
    --ds-notification-success: #0e2a17;
    --ds-notification-warning: #33290b;
    --ds-notification-info: #0d1d3d;
    --ds-overlay: rgba(0, 0, 0, 0.65);
    --ds-skeleton: #333333;
    --ds-page: #161616;
    --ds-page-canvas: #262626;
    --ds-page-border: #525252;
    --ds-code-gutter: #1e1e1e;
  }
}

/* Same dark values, forced by the app's appearance setting, or on one part of
   the window that is always dark (.ds-dark), such as the presenter view. Keep
   in step with the block above. */
:root[data-theme="dark"],
.ds-dark {
  --ds-background: #161616;
  --ds-background-hover: rgba(141, 141, 141, 0.16);
  --ds-background-active: rgba(141, 141, 141, 0.4);
  --ds-background-selected: rgba(141, 141, 141, 0.24);
  --ds-background-inverse: #f4f4f4;
  --ds-background-inverse-hover: #e8e8e8;
  --ds-layer-01: #262626;
  --ds-layer-hover-01: #333333;
  --ds-layer-active-01: #525252;
  --ds-layer-selected-01: #393939;
  --ds-layer-02: #393939;
  --ds-layer-hover-02: #474747;
  --ds-layer-accent-01: #393939;
  --ds-field-01: #262626;
  --ds-field-hover-01: #333333;
  --ds-field-02: #393939;
  --ds-border-subtle-00: #393939;
  --ds-border-subtle-01: #525252;
  --ds-border-strong-01: #8d8d8d;
  --ds-border-interactive: var(--ds-accent);
  --ds-border-disabled: rgba(141, 141, 141, 0.5);
  --ds-text-primary: #f4f4f4;
  --ds-text-secondary: #c6c6c6;
  --ds-text-helper: #a8a8a8;
  --ds-text-placeholder: rgba(244, 244, 244, 0.4);
  --ds-text-on-color: #ffffff;
  --ds-text-inverse: #161616;
  --ds-text-disabled: rgba(244, 244, 244, 0.25);
  --ds-text-error: #ff8389;
  --ds-link-primary: var(--ds-accent);
  --ds-link-primary-hover: color-mix(in srgb, var(--ds-accent) 70%, #fff);
  --ds-icon-primary: #f4f4f4;
  --ds-icon-secondary: #c6c6c6;
  --ds-icon-on-color: #ffffff;
  --ds-icon-disabled: rgba(244, 244, 244, 0.25);
  --ds-interactive: var(--ds-accent);
  --ds-focus: var(--ds-accent);
  --ds-focus-inset: #161616;
  --ds-highlight: color-mix(in srgb, var(--ds-accent) 35%, #161616);
  --ds-button-primary: var(--ds-accent-strong);
  --ds-button-primary-hover: color-mix(in srgb, var(--ds-accent) 66%, #000);
  --ds-button-primary-active: color-mix(in srgb, var(--ds-accent) 50%, #000);
  --ds-button-secondary: #6f6f6f;
  --ds-button-secondary-hover: #5e5e5e;
  --ds-button-secondary-active: #393939;
  --ds-button-danger: #da1e28;
  --ds-button-danger-hover: #b81921;
  --ds-button-danger-active: #750e13;
  --ds-button-disabled: rgba(141, 141, 141, 0.3);
  --ds-support-error: #fa4d56;
  --ds-support-success: #42be65;
  --ds-support-warning: #f1c21b;
  --ds-support-info: #4589ff;
  --ds-notification-error: #3b1416;
  --ds-notification-success: #0e2a17;
  --ds-notification-warning: #33290b;
  --ds-notification-info: #0d1d3d;
  --ds-overlay: rgba(0, 0, 0, 0.65);
  --ds-skeleton: #333333;
  --ds-page: #161616;
  --ds-page-canvas: #262626;
  --ds-page-border: #525252;
  --ds-code-gutter: #1e1e1e;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"],
.ds-dark {
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-duration-fast-01: 0ms;
    --ds-duration-fast-02: 0ms;
    --ds-duration-moderate-01: 0ms;
    --ds-duration-moderate-02: 0ms;
  }
}