/* Semantic tokens. The names follow funkeltronic.ai so the product sites share one schema.
   html[data-theme] picks dark or light, html[data-design] picks the colour world.
   Each design names its mark for both themes. tools/build_logo.py draws the marks as
   assets/logo-mark-<design>-<theme>.svg, in the ribbon colours of the design below. */

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --container: 1120px;
  --gutter: 24px;

  /* Aurora, dark: the default. Blue, violet, cyan. Its mark is the vector ribbon of tools/build_logo.py. */
  --bg: #05070D;
  --bg-alt: #080C16;
  --surface: #0D1322;
  --surface-2: #151D31;
  --text: #F2F6FF;
  --text-muted: #A6B3CF;
  --primary: #3D7BFF;
  --accent: #22E6FF;
  --accent-2: #9A76FF;
  --link: #8DB8FF;
  --border: rgba(150, 180, 255, 0.16);
  --border-strong: rgba(150, 180, 255, 0.34);
  --on-primary: #03060C;
  --ok: #3DF5B5;
  --wait: #FFC857;

  /* Decoration only: aurora curtains, ribbons (front start, back, front end), bits. */
  --aurora-1: #2B6BFF;
  --aurora-2: #22E6FF;
  --aurora-3: #8A5CFF;
  --aurora-4: #4D8DFF;
  --ribbon-1: #3D7BFF;
  --ribbon-2: #8A5CFF;
  --ribbon-3: #22E6FF;
  --bit: #9FD4FF;
  --glow: 1;
  --veil: 50%;
  --mark: url("assets/logo-mark-aurora-dark.svg");
  --pipesmith-mark: url("assets/pipesmith-symbol-aurora-128.png");
}

/* Neon: blue in front, pink behind. */
:root[data-design="neon"] {
  --primary: #4D7DFF;
  --accent: #FF7AD9;
  --accent-2: #C77DFF;
  --link: #9DBEFF;
  --aurora-1: #2B5BFF;
  --aurora-2: #B44CFF;
  --aurora-3: #FF3DCB;
  --aurora-4: #3D7BFF;
  --ribbon-1: #2B5BFF;
  --ribbon-2: #FF5CCF;
  --ribbon-3: #5C8CFF;
  --bit: #E6C8FF;
  --mark: url("assets/logo-mark-neon-dark.svg");
}

/* Ice: blue and white, with the cyan of the dot. */
:root[data-design="ice"] {
  --primary: #4B86FF;
  --accent: #22E6FF;
  --accent-2: #8FB4FF;
  --link: #A9CBFF;
  --aurora-1: #1F56E0;
  --aurora-2: #5C9DFF;
  --aurora-3: #BFE3FF;
  --aurora-4: #EAF4FF;
  --ribbon-1: #1F56E0;
  --ribbon-2: #22E6FF;
  --ribbon-3: #BFE3FF;
  --bit: #FFFFFF;
  --mark: url("assets/logo-mark-ice-dark.svg");
}

/* Polar: blue, cyan and green, with a yellow dot. */
:root[data-design="polar"] {
  --primary: #2C6DFF;
  --accent: #3DF5B5;
  --accent-2: #22E6FF;
  --link: #8DB8FF;
  --aurora-1: #2B6BFF;
  --aurora-2: #22E6FF;
  --aurora-3: #3DF5B5;
  --aurora-4: #1FBF8F;
  --ribbon-1: #2B6BFF;
  --ribbon-2: #22E6FF;
  --ribbon-3: #3DF5B5;
  --bit: #FFE58A;
  --mark: url("assets/logo-mark-polar-dark.svg");
}

:root[data-theme="light"] {
  --bg: #F5F7FC;
  --bg-alt: #EBEFF8;
  --surface: #FFFFFF;
  --surface-2: #EEF2FA;
  --text: #0A1020;
  --text-muted: #46526E;
  --primary: #1D4FE0;
  --accent: #086F87;
  --accent-2: #5B3BD6;
  --link: #1D4FE0;
  --border: rgba(10, 16, 40, 0.14);
  --border-strong: rgba(10, 16, 40, 0.3);
  --on-primary: #FFFFFF;
  --ok: #0B6E52;
  --wait: #8A5200;

  --aurora-1: #7FA8FF;
  --aurora-2: #7FE9F5;
  --aurora-3: #B9A2FF;
  --aurora-4: #9CC0FF;
  --ribbon-1: #2B62F0;
  --ribbon-2: #7A52F0;
  --ribbon-3: #12B5D6;
  --bit: #1D4FE0;
  --glow: 0;
  --veil: 66%;
  --mark: url("assets/logo-mark-aurora-light.svg");
}

:root[data-theme="light"][data-design="neon"] {
  --accent: #A3127F;
  --accent-2: #6A2FC9;
  --aurora-1: #8FA6FF;
  --aurora-2: #D0A2FF;
  --aurora-3: #FFA6E6;
  --aurora-4: #9CB4FF;
  --ribbon-1: #2B5BFF;
  --ribbon-2: #F03FB8;
  --ribbon-3: #5C8CFF;
  --bit: #6A2FC9;
  --mark: url("assets/logo-mark-neon-light.svg");
}

:root[data-theme="light"][data-design="ice"] {
  --accent: #1D4FE0;
  --accent-2: #2D5FC4;
  --aurora-1: #8DB4FF;
  --aurora-2: #B4D2FF;
  --aurora-3: #D2E6FF;
  --aurora-4: #C4DCFF;
  --ribbon-1: #1F56E0;
  --ribbon-2: #12B5D6;
  --ribbon-3: #8DB4FF;
  --bit: #1D4FE0;
  --mark: url("assets/logo-mark-ice-light.svg");
}

:root[data-theme="light"][data-design="polar"] {
  --accent: #0B6E52;
  --accent-2: #086F87;
  --aurora-1: #7FA8FF;
  --aurora-2: #7FE9F5;
  --aurora-3: #8DF0CF;
  --aurora-4: #A6E8D4;
  --ribbon-1: #1D4FE0;
  --ribbon-2: #0AA7C2;
  --ribbon-3: #12A87A;
  --bit: #0B6E52;
  --mark: url("assets/logo-mark-polar-light.svg");
}