/* Colour themes. Every colour in app.css comes from these variables; :root is Ember.
   The chosen theme is set as <html data-theme="..."> by theme.js (cached) and app.js (settings). */
:root,
[data-theme='ember'] {
  color-scheme: dark;
  /* backdrop */
  --bg: #140a0b;
  --bg-1: rgba(240, 40, 40, 0.5);
  --bg-2: rgba(255, 140, 30, 0.45);
  --bg-3: rgba(255, 90, 31, 0.2);
  /* surfaces */
  --card: rgba(38, 20, 20, 0.78);
  --card-2: rgba(58, 30, 28, 0.7);
  --surface: rgba(34, 17, 16, 0.96);
  --dock-bg: rgba(24, 12, 12, 0.88);
  --select-bg: #2a1614;
  --shadow: rgba(0, 0, 0, 0.8);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.25);
  --chip-bg: rgba(255, 255, 255, 0.07);
  --field-bg: rgba(0, 0, 0, 0.28);
  --switch-off: rgba(255, 255, 255, 0.12);
  /* text */
  --text: #fff4f0;
  --muted: #c9a9a2;
  --pill-bg: #fff;
  --pill-ink: #2a1210;
  --toast-bg: #fff;
  --toast-ink: #2a1210;
  --dock-on: #fff;
  /* brand */
  --c1: #ff3b30;
  --c2: #ff5e1a;
  --c3: #ffa21a;
  --on-grad: #fff;
  --glow-rgb: 255, 80, 40;
  --glow-a: 0.6;
  --hot-rgb: 255, 150, 50;
  --hot: #ffe08a;
  --spark: #ff7a1f;
  --hi: #ffd2bd;
  --tag-bg: #2a1412;
  --orb-bg: radial-gradient(circle at 35% 30%, #ffc9a0, #ff4a2a 45%, #e0262f);
  --orb-ink: #fff;
  --danger: #ff6b8b;
  --ok: #4fe0a8;
  --logo-flame: #fff;
  --logo-flame-2: #ffe0cc;
}

/* Gradients are rebuilt wherever a theme is set, so swatches previewing another theme get
   that theme's gradient rather than inheriting the page's. Theme blocks below may override. */
:root,
[data-theme] {
  --grad: linear-gradient(135deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
  --grad-flow: linear-gradient(90deg, var(--c1), var(--c3), var(--c2), var(--c1));
  --hero-grad: var(--grad);
  --print-grad: var(--grad);
}

[data-theme='twilight'] {
  --bg: #0b0e26;
  --bg-1: rgba(140, 92, 255, 0.5);
  --bg-2: rgba(56, 120, 255, 0.48);
  --bg-3: rgba(80, 160, 255, 0.2);
  --card: rgba(22, 26, 52, 0.78);
  --card-2: rgba(36, 41, 76, 0.7);
  --surface: rgba(20, 24, 50, 0.96);
  --dock-bg: rgba(14, 17, 40, 0.88);
  --select-bg: #1a1e3e;
  --text: #f3f4ff;
  --muted: #9da3c8;
  --pill-ink: #15183a;
  --toast-ink: #15183a;
  --c1: #9b6bff;
  --c2: #5d7dff;
  --c3: #3fb0ff;
  --glow-rgb: 124, 92, 255;
  --hot-rgb: 130, 170, 255;
  --hot: #ece6ff;
  --spark: #8f9bff;
  --hi: #d8ccff;
  --tag-bg: #1a1c40;
  --orb-bg: radial-gradient(circle at 35% 30%, #d0bdff, #7b5cff 45%, #3f5cff);
}

[data-theme='lagoon'] {
  --print-grad: linear-gradient(135deg, #0fae67 0%, #0a9f93 52%, #0b7fc4 100%);
  --bg: #04131a;
  --bg-1: rgba(30, 230, 130, 0.42);
  --bg-2: rgba(20, 170, 255, 0.42);
  --bg-3: rgba(20, 210, 190, 0.2);
  --card: rgba(10, 34, 38, 0.78);
  --card-2: rgba(18, 52, 56, 0.7);
  --surface: rgba(8, 30, 34, 0.96);
  --dock-bg: rgba(5, 20, 24, 0.88);
  --select-bg: #10292c;
  --text: #effffb;
  --muted: #93bdb6;
  --pill-ink: #062a26;
  --toast-ink: #062a26;
  --c1: #1ff28a;
  --c2: #12d6c4;
  --c3: #18adff;
  --on-grad: #032620;
  --glow-rgb: 20, 220, 170;
  --hot-rgb: 120, 255, 210;
  --hot: #eafff7;
  --spark: #3cf0c0;
  --hi: #c4f7ea;
  --tag-bg: #0c2a2b;
  --orb-bg: radial-gradient(circle at 35% 30%, #c4ffea, #19d6a8 45%, #0e8fd6);
  --orb-ink: #032620;
}

/* Black and white, toned down for client-facing use. */
[data-theme='mono'] {
  --print-grad: linear-gradient(135deg, #18181b 0%, #3f3f46 52%, #71717a 100%);
  --bg: #0c0c0e;
  --bg-1: rgba(255, 255, 255, 0.07);
  --bg-2: rgba(255, 255, 255, 0.04);
  --bg-3: transparent;
  --card: rgba(26, 26, 29, 0.92);
  --card-2: rgba(40, 40, 44, 0.85);
  --surface: rgba(24, 24, 27, 0.98);
  --dock-bg: rgba(18, 18, 20, 0.94);
  --select-bg: #1d1d20;
  --text: #f5f5f7;
  --muted: #a1a1a6;
  --pill-ink: #111;
  --toast-ink: #111;
  --c1: #ffffff;
  --c2: #e4e4e7;
  --c3: #c4c4c8;
  --on-grad: #111;
  --glow-rgb: 200, 200, 210;
  --glow-a: 0.18;
  --hot-rgb: 230, 230, 235;
  --hot: #ffffff;
  --spark: #d4d4d8;
  --hi: #e8e8ea;
  --tag-bg: #1c1c1f;
  --orb-bg: radial-gradient(circle at 35% 30%, #ffffff, #dcdce0 50%, #a1a1a6);
  --orb-ink: #111;
  --logo-flame: #18181b;
  --logo-flame-2: #3f3f46;
}

/* The one light theme. */
[data-theme='pastel'] {
  --print-grad: var(--hero-grad);
  color-scheme: light;
  --bg: #f7f2fc;
  --bg-1: rgba(255, 170, 210, 0.6);
  --bg-2: rgba(160, 210, 255, 0.6);
  --bg-3: rgba(190, 255, 220, 0.5);
  --card: rgba(255, 255, 255, 0.72);
  --card-2: rgba(255, 255, 255, 0.88);
  --surface: rgba(255, 255, 255, 0.98);
  --dock-bg: rgba(255, 255, 255, 0.88);
  --select-bg: #fff;
  --shadow: rgba(90, 60, 140, 0.25);
  --line: rgba(60, 40, 90, 0.12);
  --line-strong: rgba(60, 40, 90, 0.3);
  --chip-bg: rgba(60, 40, 90, 0.07);
  --field-bg: rgba(255, 255, 255, 0.85);
  --switch-off: rgba(60, 40, 90, 0.16);
  --text: #2e2840;
  --muted: #7a7192;
  --pill-bg: #2e2840;
  --pill-ink: #fff;
  --toast-bg: #2e2840;
  --toast-ink: #fff;
  --dock-on: #2e2840;
  --c1: #ff8fbf;
  --c2: #b896ff;
  --c3: #7fc9ff;
  --hero-grad: linear-gradient(135deg, #e0559a 0%, #8a5ce6 52%, #2f97de 100%);
  --on-grad: #2e2840;
  --glow-rgb: 190, 140, 255;
  --glow-a: 0.4;
  --hot-rgb: 255, 170, 215;
  --hot: #ffffff;
  --spark: #ff9fd0;
  --hi: #6b4fa0;
  --tag-bg: #ffffff;
  --orb-bg: radial-gradient(circle at 35% 30%, #ffffff, #f1b4ff 45%, #9cc6ff);
  --orb-ink: #2e2840;
  --danger: #d6336c;
  --ok: #1f9d6b;
}

[data-theme='aurora'] {
  --print-grad: linear-gradient(135deg, #10b874 0%, #1598c9 52%, #8746e0 100%);
  --bg: #030912;
  --bg-1: rgba(40, 255, 160, 0.34);
  --bg-2: rgba(150, 90, 255, 0.42);
  --bg-3: rgba(40, 200, 255, 0.3);
  --card: rgba(10, 22, 36, 0.74);
  --card-2: rgba(18, 34, 52, 0.7);
  --surface: rgba(10, 20, 34, 0.96);
  --dock-bg: rgba(6, 14, 26, 0.88);
  --select-bg: #0f1e30;
  --text: #eefcff;
  --muted: #93b3c4;
  --pill-ink: #04121c;
  --toast-ink: #04121c;
  --c1: #35ffa6;
  --c2: #38d4ff;
  --c3: #b46bff;
  --on-grad: #04121c;
  --glow-rgb: 70, 230, 200;
  --hot-rgb: 160, 255, 220;
  --hot: #f0fff8;
  --spark: #6ff7d0;
  --hi: #c9ffee;
  --tag-bg: #0b1a26;
  --orb-bg: radial-gradient(circle at 35% 30%, #dcfff3, #3de0c0 40%, #8a5cff);
  --orb-ink: #04121c;
}

[data-theme='rainbow'] {
  --bg: #0c0a14;
  --bg-1: rgba(255, 60, 100, 0.36);
  --bg-2: rgba(60, 140, 255, 0.36);
  --bg-3: rgba(80, 255, 150, 0.24);
  --card: rgba(26, 20, 38, 0.78);
  --card-2: rgba(40, 32, 56, 0.7);
  --surface: rgba(24, 18, 36, 0.96);
  --dock-bg: rgba(16, 12, 26, 0.88);
  --select-bg: #1f1830;
  --text: #fdf7ff;
  --muted: #b6a9c9;
  --pill-ink: #1a1226;
  --toast-ink: #1a1226;
  --c1: #ff3b5c;
  --c2: #ffd21a;
  --c3: #3d9bff;
  --grad: linear-gradient(135deg, #ff3b5c 0%, #ff9f1a 22%, #ffd21a 40%, #3ddc84 60%, #3d9bff 80%, #a35cff 100%);
  --grad-flow: linear-gradient(90deg, #ff3b5c, #ff9f1a, #ffd21a, #3ddc84, #3d9bff, #a35cff, #ff3b5c);
  --glow-rgb: 255, 110, 190;
  --hot-rgb: 255, 220, 120;
  --hot: #ffffff;
  --spark: #ffd34d;
  --hi: #ffe0f4;
  --tag-bg: #1c1426;
  --orb-bg: conic-gradient(from 200deg, #ff3b5c, #ff9f1a, #ffd21a, #3ddc84, #3d9bff, #a35cff, #ff3b5c);
}