@layer base, components, modules, utilities;

@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/bricolage-grotesque-16ac37c9.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/ibm-plex-sans-light-c4f52a24.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/ibm-plex-sans-regular-90cc55e6.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/ibm-plex-sans-medium-9fb7ea15.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/ibm-plex-sans-semibold-5326bafa.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/ibm-plex-mono-regular-d13bb5b4.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/ibm-plex-mono-semibold-0fdd541f.woff2") format("woff2"); font-weight: 600; font-display: swap; }

@layer base {
  /* luftflow editor: a calm workspace. Colour is a code for screen kinds, not decoration. /styleguide renders every primitive. */

  :root {
    /* Carbon Gray 10 (White) theme: layered neutrals, Blue 60 interactive, square corners. */
    --bg: #f4f4f4;
    --surface: #ffffff;
    --surface-2: #f4f4f4;
    --line: #e0e0e0;
    --line-strong: #8d8d8d;
    --ink: #161616;
    --ink-2: #474747;
    --ink-3: #6f6f6f;
    --placeholder: #6f6f6f;
    --primary: #0f62fe;
    --link: #0f62fe;
    --primary-hover: #0353e9;
    --focus: #0f62fe;
    --live: #d02670;
    --live-glow: rgba(208, 38, 112, .24);
    --live-soft: #ffd7e8;

    --menu: #ff832b;
    --menu-soft: #fff2e8;
    --input: #8a3ffc;
    --input-soft: #f6f2ff;
    --input-ink: #6929c4;
    --router: #1192e8;
    --router-soft: #e5f6ff;
    --end: #24a148;
    --end-soft: #defbe6;
    --error: #da1e28;
    --error-soft: #fff1f1;
    --warning: #8e6a00;
    --warning-soft: #fcf4d6;
    --ok: #24a148;
    --ok-soft: #defbe6;
    --ok-ink: #0e6027;
    --island: color-mix(in srgb, var(--surface) 92%, transparent);
    --spectrum: linear-gradient(90deg, var(--menu) 0 25%, var(--input) 25% 50%, var(--router) 50% 75%, var(--end) 75% 100%);

    --shadow-float: 0 2px 6px rgb(var(--shade) / .1), 0 0 1px rgb(var(--shade) / .16);
    --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    --r-control: 0;
    --r-card: 0;
    --r-section: 0;

    --on-primary: #ffffff;
    --inverse: #393939;
    --on-inverse: #ffffff;
    --on-accent: #ffffff;
    --shade: 22 22 22;
    --ink-rgb: 22 22 22;
    --focus-rgb: 15 98 254;
    --menu-ink: #8a3800;
    --router-ink: #00539a;
    --router-line: #a6d8f7;
    --live-ink: #9b1c5b;
    --live-line: #f5aacd;
    --ok-line: #a7f0ba;
    --error-line: #ffb3b8;
    --error-surface: #fff1f1;
    --error-ink: #a2191f;
    --danger: #da1e28;
    --danger-hover: #ba1b23;
    --danger-soft: #fff1f1;
    --danger-ink: #a2191f;
    --on-danger: #ffffff;
    --warning-line: #f1d98a;
    --warning-surface: #fdf6dd;
    --screen-bg: #edf5ff;
    --screen-soft: #f4f8ff;
    --screen-hover: #e0eeff;
    --screen-line: #c9e0fb;
    --screen-rule: #b3d3f7;
    --screen-ink: #001d6c;
    --screen-muted: #4a5a86;
    --keycap: #ffffff;
    --keycap-line: #c6c6c6;
    --action-line: #e0d4ff;
    --action-bg: #f6f2ff;
    --trigger-icon: #42be65;
    --trigger-bg: #161616;
    --trigger-ink: #ffffff;
    --code-bg: #f4f4f4;
    --code-muted: #a8a8a8;
    --code-ink: #161616;
    --tok-key: #0043ce;
    --tok-punct: #8d8d8d;
    --tok-str: #0e6027;
    --tok-num: #a2191f;
    --tok-ref: #00539a;
    --tok-expr: #8a3800;
    --phone-shade: 13 18 16;
    --phone-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --phone-app-bg: #ffffff;
    --phone-ink: #000000;
    --phone-muted: #8e8e93;
    --phone-dial-key: #e5e5ea;
    --phone-dial-key-press: #bcbcc2;
    --phone-dim: rgb(0 0 0 / .2);
    --phone-alert: rgb(242 242 242 / .9);
    --phone-alert-line: rgb(60 60 67 / .29);
    --phone-alert-press: rgb(209 209 214 / .9);
    --phone-field: #ffffff;
    --phone-field-line: #c7c7cc;
    --phone-link: #007aff;
    --phone-veil: rgb(242 242 242 / .96);
    --phone-spinner-track: #d1d1d6;
    --phone-keypad: #d1d3d9;
    --phone-key: #ffffff;
    --phone-key-press: #b4b8c0;
    --phone-key-ink: #000000;
    --phone-key-shadow: #898a8d;
    color-scheme: light;
  }

  /* Dark: the same roles, redefined. System preference applies unless the viewer chose a theme. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      /* Carbon Gray 100 theme. */
      --bg: #161616;
      --surface: #262626;
      --surface-2: #393939;
      --line: #393939;
      --line-strong: #6f6f6f;
      --ink: #f4f4f4;
      --ink-2: #c6c6c6;
      --ink-3: #8d8d8d;
      --placeholder: #8d8d8d;
      --primary: #0f62fe;
      --link: #78a9ff;
      --primary-hover: #0353e9;
      --on-primary: #ffffff;
      --inverse: #f4f4f4;
      --on-inverse: #161616;
      --on-accent: #ffffff;
      --focus: #ffffff;
      --focus-rgb: 255 255 255;
      --shade: 0 0 0;
      --ink-rgb: 244 244 244;
      --shadow-float: 0 2px 6px rgb(0 0 0 / .5), 0 0 1px rgb(0 0 0 / .5);
      --live: #ff7eb6;
      --live-glow: rgb(255 126 182 / .32);
      --live-soft: #510224;
      --live-ink: #ffafd2;
      --live-line: #9b1c5b;
      --menu: #ff832b;
      --menu-soft: #3e1f00;
      --menu-ink: #ffb784;
      --input: #a56eff;
      --input-soft: #31135e;
      --input-ink: #d4bbff;
      --router: #33b1ff;
      --router-soft: #001d6c;
      --router-ink: #a6c8ff;
      --router-line: #0043ce;
      --end: #42be65;
      --end-soft: #022d0d;
      --error: #ff8389;
      --error-soft: #520408;
      --error-line: #a2191f;
      --error-surface: #2d0709;
      --error-ink: #ffb3b8;
      --danger: #fa4d56;
      --danger-hover: #ff8389;
      --danger-soft: #520408;
      --danger-ink: #ffb3b8;
      --on-danger: #ffffff;
      --warning: #f1c21b;
      --warning-soft: #302400;
      --warning-line: #684e00;
      --warning-surface: #211a00;
      --ok: #42be65;
      --ok-soft: #022d0d;
      --ok-ink: #a7f0ba;
      --ok-line: #0e6027;
      --screen-bg: #001d6c;
      --screen-soft: #001141;
      --screen-hover: #002d9c;
      --screen-line: #0043ce;
      --screen-rule: #0f62fe;
      --screen-ink: #d0e2ff;
      --screen-muted: #a6c8ff;
      --keycap: #393939;
      --keycap-line: #6f6f6f;
      --action-line: #491d8b;
      --action-bg: #1c0f30;
      --trigger-icon: #42be65;
    --trigger-bg: #393939;
    --trigger-ink: #f4f4f4;
      --code-bg: #262626;
      --code-muted: #6f6f6f;
      --code-ink: #f4f4f4;
      --tok-key: #78a9ff;
      --tok-punct: #8d8d8d;
      --tok-str: #42be65;
      --tok-num: #ff8389;
      --tok-ref: #33b1ff;
      --tok-expr: #ffb784;
      --phone-shade: 0 0 0;
      --phone-app-bg: #000000;
      --phone-ink: #ffffff;
      --phone-muted: #8e8e93;
      --phone-dial-key: #333336;
      --phone-dial-key-press: #636366;
      --phone-dim: rgb(0 0 0 / .45);
      --phone-alert: rgb(37 37 37 / .92);
      --phone-alert-line: rgb(84 84 88 / .65);
      --phone-alert-press: rgb(58 58 60 / .92);
      --phone-field: #1c1c1e;
      --phone-field-line: #3a3a3c;
      --phone-link: #0a84ff;
      --phone-veil: rgb(37 37 37 / .96);
      --phone-spinner-track: #3a3a3c;
      --phone-keypad: #2b2b2d;
      --phone-key: #58585b;
      --phone-key-press: #38383a;
      --phone-key-ink: #ffffff;
      --phone-key-shadow: #000000;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    /* Carbon Gray 100 theme. */
    --bg: #161616;
    --surface: #262626;
    --surface-2: #393939;
    --line: #393939;
    --line-strong: #6f6f6f;
    --ink: #f4f4f4;
    --ink-2: #c6c6c6;
    --ink-3: #8d8d8d;
    --placeholder: #8d8d8d;
    --primary: #0f62fe;
    --link: #78a9ff;
    --primary-hover: #0353e9;
    --on-primary: #ffffff;
    --inverse: #f4f4f4;
    --on-inverse: #161616;
    --on-accent: #ffffff;
    --focus: #ffffff;
    --focus-rgb: 255 255 255;
    --shade: 0 0 0;
    --ink-rgb: 244 244 244;
    --shadow-float: 0 2px 6px rgb(0 0 0 / .5), 0 0 1px rgb(0 0 0 / .5);
    --live: #ff7eb6;
    --live-glow: rgb(255 126 182 / .32);
    --live-soft: #510224;
    --live-ink: #ffafd2;
    --live-line: #9b1c5b;
    --menu: #ff832b;
    --menu-soft: #3e1f00;
    --menu-ink: #ffb784;
    --input: #a56eff;
    --input-soft: #31135e;
    --input-ink: #d4bbff;
    --router: #33b1ff;
    --router-soft: #001d6c;
    --router-ink: #a6c8ff;
    --router-line: #0043ce;
    --end: #42be65;
    --end-soft: #022d0d;
    --error: #ff8389;
    --error-soft: #520408;
    --error-line: #a2191f;
    --error-surface: #2d0709;
    --error-ink: #ffb3b8;
    --danger: #fa4d56;
    --danger-hover: #ff8389;
    --danger-soft: #520408;
    --danger-ink: #ffb3b8;
    --on-danger: #ffffff;
    --warning: #f1c21b;
    --warning-soft: #302400;
    --warning-line: #684e00;
    --warning-surface: #211a00;
    --ok: #42be65;
    --ok-soft: #022d0d;
    --ok-ink: #a7f0ba;
    --ok-line: #0e6027;
    --screen-bg: #001d6c;
    --screen-soft: #001141;
    --screen-hover: #002d9c;
    --screen-line: #0043ce;
    --screen-rule: #0f62fe;
    --screen-ink: #d0e2ff;
    --screen-muted: #a6c8ff;
    --keycap: #393939;
    --keycap-line: #6f6f6f;
    --action-line: #491d8b;
    --action-bg: #1c0f30;
    --trigger-icon: #42be65;
    --trigger-bg: #393939;
    --trigger-ink: #f4f4f4;
    --code-bg: #262626;
    --code-muted: #6f6f6f;
    --code-ink: #f4f4f4;
    --tok-key: #78a9ff;
    --tok-punct: #8d8d8d;
    --tok-str: #42be65;
    --tok-num: #ff8389;
    --tok-ref: #33b1ff;
    --tok-expr: #ffb784;
    --phone-shade: 0 0 0;
    --phone-app-bg: #000000;
    --phone-ink: #ffffff;
    --phone-muted: #8e8e93;
    --phone-dial-key: #333336;
    --phone-dial-key-press: #636366;
    --phone-dim: rgb(0 0 0 / .45);
    --phone-alert: rgb(37 37 37 / .92);
    --phone-alert-line: rgb(84 84 88 / .65);
    --phone-alert-press: rgb(58 58 60 / .92);
    --phone-field: #1c1c1e;
    --phone-field-line: #3a3a3c;
    --phone-link: #0a84ff;
    --phone-veil: rgb(37 37 37 / .96);
    --phone-spinner-track: #3a3a3c;
    --phone-keypad: #2b2b2d;
    --phone-key: #58585b;
    --phone-key-press: #38383a;
    --phone-key-ink: #ffffff;
    --phone-key-shadow: #000000;
    color-scheme: dark;
  }
}