/*
 * The eight Deux palettes, copied value for value from the app
 * (src/theme/v2/palettes.ts, which copies the approved "Deux looks" canvas).
 * Soft: Cloud, Sage, Blush, Midnight. Bold: Sunny, Candy, Matcha, Noir.
 *
 * Everything on the page reads colours from these variables only, so one
 * attribute pair on <html> (data-look, data-palette) re-themes the whole page.
 * The same attributes can sit on any element (the look previews do), and the
 * variables below are re-declared there, so a Bold preview can live inside a
 * Soft page.
 *
 * tools/check-contrast.mjs reads this file and proves the text pairs.
 */

/* ---------- Soft palettes ---------- */

[data-palette="cloud"] {
  --page: #E7EAFB;
  --glow: #D7DDFF;
  --bg: #F4F5FE;
  --surface: #FFFFFF;
  --surface-alt: #F2F3FD;
  --line: #E5E8F7;
  --frame: rgba(30, 38, 110, 0.06);
  --text: #151832;
  --text-2: #4B5070;
  --muted: #616687;
  --accent: #4F5BFF;
  --accent-ink: #3A44D6;
  --on-accent: #FFFFFF;
  --accent-soft: #E5E8FF;
  --deux: #FF6B8B;
  --deux-soft: #FFE9EF;
  --deux-ink: #B3284C;
  --calm-soft: #DDF4EA;
  --calm-ink: #1F7A55;
  --online: #22B573;
  --online-text: #1F7A55;
  --scrim: rgba(21, 24, 50, 0.36);
  --shadow: rgba(40, 48, 140, 0.42);
  --tint0: #E5E8FF;
  --tint1: #FFE3EA;
  --tint2: #DDF4EA;
  --tint3: #FFF0D6;
  --tint4: #DDEFFA;
  --line-strong: #CDD2EE;
  --pv0: #FFD2C2;
  --pv1: #C9E7D7;
  --pv2: #D7DCFF;
  --swatch: #4F5BFF;
}

[data-palette="sage"] {
  --page: #E1EEE6;
  --glow: #CFE8DA;
  --bg: #F3F8F5;
  --surface: #FFFFFF;
  --surface-alt: #EEF5F1;
  --line: #DDEAE2;
  --frame: rgba(20, 70, 45, 0.07);
  --text: #13241B;
  --text-2: #3F5248;
  --muted: #55695E;
  --accent: #1E7A55;
  --accent-ink: #17664A;
  --on-accent: #FFFFFF;
  --accent-soft: #D8EFE3;
  --deux: #F08A5D;
  --deux-soft: #FDECE3;
  --deux-ink: #A3460F;
  --calm-soft: #E5E8FF;
  --calm-ink: #3A44D6;
  --online: #22B573;
  --online-text: #1F7A55;
  --scrim: rgba(19, 36, 27, 0.36);
  --shadow: rgba(20, 80, 52, 0.38);
  --tint0: #E5E8FF;
  --tint1: #FFE3EA;
  --tint2: #DDF4EA;
  --tint3: #FFF0D6;
  --tint4: #DDEFFA;
  --line-strong: #BFD6C9;
  --pv0: #FFD9C2;
  --pv1: #D7DCFF;
  --pv2: #FFE6B3;
  --swatch: #1E7A55;
}

[data-palette="blush"] {
  --page: #F7E4E2;
  --glow: #FAD7D1;
  --bg: #FDF4F2;
  --surface: #FFFFFF;
  --surface-alt: #FBEFEC;
  --line: #F2E1DD;
  --frame: rgba(110, 40, 40, 0.06);
  --text: #2A1716;
  --text-2: #5E4441;
  --muted: #7A5B57;
  --accent: #C4364F;
  --accent-ink: #A12A40;
  --on-accent: #FFFFFF;
  --accent-soft: #FADDE2;
  --deux: #4F5BFF;
  --deux-soft: #E5E8FF;
  --deux-ink: #3A44D6;
  --calm-soft: #DDF4EA;
  --calm-ink: #1F7A55;
  --online: #22B573;
  --online-text: #1F7A55;
  --scrim: rgba(42, 23, 22, 0.34);
  --shadow: rgba(140, 50, 50, 0.34);
  --tint0: #E5E8FF;
  --tint1: #FFE3EA;
  --tint2: #DDF4EA;
  --tint3: #FFF0D6;
  --tint4: #DDEFFA;
  --line-strong: #E5C7C1;
  --pv0: #D7DCFF;
  --pv1: #C9E7D7;
  --pv2: #FFE6B3;
  --swatch: #C4364F;
}

[data-palette="midnight"] {
  --page: #06070D;
  --glow: #1A1E48;
  --bg: #0E1020;
  --surface: #181B31;
  --surface-alt: #1F2340;
  --line: #272C4C;
  --frame: rgba(255, 255, 255, 0.06);
  --text: #EEF0FF;
  --text-2: #C3C7E6;
  --muted: #9BA0C4;
  --accent: #8E98FF;
  --accent-ink: #C1C7FF;
  --on-accent: #0B0D1F;
  --accent-soft: #262B55;
  --deux: #FF8FAE;
  --deux-soft: #3A2337;
  --deux-ink: #FFB8CB;
  --calm-soft: #1C3A33;
  --calm-ink: #9FEACB;
  --online: #4ADE9A;
  --online-text: #9FEACB;
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow: rgba(0, 0, 0, 0.75);
  --tint0: #2B2F5C;
  --tint1: #3A2337;
  --tint2: #1C3A33;
  --tint3: #3D3220;
  --tint4: #21364A;
  --line-strong: #3A4070;
  --pv0: #3A2337;
  --pv1: #1C3A33;
  --pv2: #262B55;
  --swatch: #8E98FF;
}

/* ---------- Bold palettes ---------- */

[data-palette="sunny"] {
  --page: #FFE59A;
  --page-dot: #E5C764;
  --bg: #FFF7DA;
  --dot: #EBDDA6;
  --card: #FFFFFF;
  --ink: #16130F;
  --face: #16130F;
  --text: #16130F;
  --text-2: #4A4335;
  --primary: #FFCF3D;
  --second: #FF6F59;
  --third: #5AA9FF;
  --deux: #FF9BCB;
  --own: #FFCF3D;
  --on-fill: #16130F;
  --online: #3DDC84;
  --scrim: rgba(22, 19, 15, 0.38);
  --av0: #FF6F59;
  --av1: #5AA9FF;
  --av2: #7ED957;
  --av3: #FFCF3D;
  --av4: #C4A6FF;
  --swatch: #FFCF3D;
}

[data-palette="candy"] {
  --page: #FFC7E3;
  --page-dot: #EE9FC6;
  --bg: #FFEFF7;
  --dot: #F3C2DA;
  --card: #FFFFFF;
  --ink: #16130F;
  --face: #16130F;
  --text: #16130F;
  --text-2: #4F3A45;
  --primary: #FF73B9;
  --second: #FFD13D;
  --third: #2FD3B3;
  --deux: #9E8CFF;
  --own: #FF73B9;
  --on-fill: #16130F;
  --online: #2FD3B3;
  --scrim: rgba(22, 19, 15, 0.38);
  --av0: #FFD13D;
  --av1: #2FD3B3;
  --av2: #9E8CFF;
  --av3: #FF9F5A;
  --av4: #7BD389;
  --swatch: #FF73B9;
}

[data-palette="matcha"] {
  --page: #CFEDA8;
  --page-dot: #A3D26C;
  --bg: #F2FBE6;
  --dot: #CDE7AC;
  --card: #FFFFFF;
  --ink: #16130F;
  --face: #16130F;
  --text: #16130F;
  --text-2: #3C4730;
  --primary: #9BE15D;
  --second: #FF8C42;
  --third: #4C9BFF;
  --deux: #FF8DB0;
  --own: #9BE15D;
  --on-fill: #16130F;
  --online: #3DDC84;
  --scrim: rgba(22, 19, 15, 0.38);
  --av0: #FF8C42;
  --av1: #4C9BFF;
  --av2: #FFD13D;
  --av3: #FF8DB0;
  --av4: #B9A3FF;
  --swatch: #9BE15D;
}

[data-palette="noir"] {
  --page: #0B0B0B;
  --page-dot: #262626;
  --bg: #151515;
  --dot: #2A2A2A;
  --card: #1F1F1F;
  --ink: #F5F1E6;
  --face: #16130F;
  --text: #F5F1E6;
  --text-2: #CFC8B8;
  --primary: #FFE14D;
  --second: #FF5C8A;
  --third: #58D7FF;
  --deux: #9DF0C9;
  --own: #FFE14D;
  --on-fill: #16130F;
  --online: #9DF0C9;
  --scrim: rgba(0, 0, 0, 0.58);
  --av0: #FF5C8A;
  --av1: #58D7FF;
  --av2: #FFE14D;
  --av3: #9DF0C9;
  --av4: #FFA65C;
  --swatch: #FFE14D;
}

/* ---------- Dark palettes ask the browser for dark controls ---------- */

html[data-palette="midnight"],
html[data-palette="noir"] {
  color-scheme: dark;
}

html[data-palette="cloud"],
html[data-palette="sage"],
html[data-palette="blush"],
html[data-palette="sunny"],
html[data-palette="candy"],
html[data-palette="matcha"] {
  color-scheme: light;
}

/* ---------- Semantic colours: the same names in both looks ----------
 * Mirrors the app's theme (src/theme/v2/theme.ts): Soft maps its "ink"
 * variants to text roles, Bold uses the ink line and flat fills.
 */

[data-look="soft"] {
  --c-page: var(--page);
  --c-bg: var(--bg);
  --c-surface: var(--surface);
  --c-surface-alt: var(--surface-alt);
  --c-line: var(--line);
  --c-ink: var(--text);
  --c-text: var(--text);
  --c-text-2: var(--text-2);
  --c-muted: var(--muted);
  --c-accent: var(--accent);
  --c-on-accent: var(--on-accent);
  --c-accent-text: var(--accent-ink);
  --c-accent-soft: var(--accent-soft);
  --c-on-accent-soft: var(--accent-ink);
  --c-deux: var(--deux);
  --c-deux-fill: var(--deux-soft);
  --c-on-deux-fill: var(--text);
  --c-on-deux-fill-2: var(--text-2);
  --c-deux-text: var(--deux-ink);
  --c-calm: var(--calm-soft);
  --c-on-calm: var(--calm-ink);
  --c-warm: var(--deux-soft);
  --c-on-warm: var(--deux-ink);
  --c-own: var(--accent);
  --c-on-own: var(--on-accent);
  --c-online: var(--online);
  --c-online-text: var(--online-text);
  --c-scrim: var(--scrim);
  --c-shadow: var(--shadow);
  --c-focus: var(--accent-ink);
  --c-ground-img: radial-gradient(900px 520px at 0% 0%, var(--glow) 0%, transparent 70%);
  --c-ground-size: auto;
  --dd-soft: inline;
  --dd-bold: none;
}

[data-look="bold"] {
  --c-page: var(--page);
  --c-bg: var(--bg);
  --c-surface: var(--card);
  --c-surface-alt: var(--bg);
  --c-line: var(--ink);
  --c-ink: var(--ink);
  --c-text: var(--text);
  --c-text-2: var(--text-2);
  --c-muted: var(--text-2);
  --c-accent: var(--primary);
  --c-on-accent: var(--on-fill);
  --c-accent-text: var(--text);
  --c-accent-soft: var(--primary);
  --c-on-accent-soft: var(--on-fill);
  --c-deux: var(--deux);
  --c-deux-fill: var(--deux);
  --c-on-deux-fill: var(--on-fill);
  --c-on-deux-fill-2: var(--on-fill);
  --c-deux-text: var(--text);
  --c-calm: var(--third);
  --c-on-calm: var(--on-fill);
  --c-warm: var(--second);
  --c-on-warm: var(--on-fill);
  --c-own: var(--own);
  --c-on-own: var(--on-fill);
  --c-online: var(--online);
  --c-online-text: var(--text-2);
  --c-scrim: var(--scrim);
  --c-shadow: var(--ink);
  --c-focus: var(--ink);
  --c-ground-img: radial-gradient(var(--page-dot) 1.5px, transparent 1.7px);
  --c-ground-size: 22px 22px;
  --dd-soft: none;
  --dd-bold: inline;
}