/* GENERATED by `npm run build:theme` — do not edit. * Source of truth: src/domain/palettes.ts * * Two independent axes: * data-palette="ember|eucalypt|blush|harbour|bone" (owner's choice, per salon) * data-mode="light|dark" (per device; omit to follow the OS) * * Both live on . With no attributes at all you get ember, following the OS — * so the page is styled before any JavaScript runs and never flashes the wrong theme. * * Use --accent for FILLS and --accent-text for TEXT; they are not interchangeable. * Text sitting on --accent uses --on-accent, on --rose uses --on-rose. Never hardcode #fff. */ /* ── Ember — Near-black and hot orange. Confident, and the only loud thing on the screen. ── */ :root:not([data-palette]), [data-palette="ember"]{ --paper:#faf8f6; --panel:#ffffff; --panel-2:#f3efea; --ink:#17120e; --ink-2:#463c34; --muted:#756b64; --line:#eae4dd; --line-2:#dcd3c9; --accent:#ff6a1f; --accent-deep:#e2560f; --accent-text:#b8410a; --accent-wash:#fdeee5; --amber:#8a6a1a; --amber-wash:#fbf4e3; --rose:#a3302a; --on-accent:#160a02; --on-rose:#ffffff; --owl-eye:#ffffff; } @media (prefers-color-scheme: dark){ :root:not([data-palette]):not([data-mode="light"]), [data-palette="ember"]:not([data-mode="light"]){ --paper:#0a0a0b; --panel:#121214; --panel-2:#1a1a1d; --ink:#f6f2ed; --ink-2:#bab4ac; --muted:#8d8780; --line:#242428; --line-2:#33333a; --accent:#ff6a1f; --accent-deep:#ff8c4d; --accent-text:#ff8c4d; --accent-wash:#2b1409; --amber:#e6b93f; --amber-wash:#2c2410; --rose:#f26a5f; --on-accent:#160a02; --on-rose:#160a02; --owl-eye:#0a0a0b; } } :root:not([data-palette])[data-mode="dark"], [data-palette="ember"][data-mode="dark"]{ --paper:#0a0a0b; --panel:#121214; --panel-2:#1a1a1d; --ink:#f6f2ed; --ink-2:#bab4ac; --muted:#8d8780; --line:#242428; --line-2:#33333a; --accent:#ff6a1f; --accent-deep:#ff8c4d; --accent-text:#ff8c4d; --accent-wash:#2b1409; --amber:#e6b93f; --amber-wash:#2c2410; --rose:#f26a5f; --on-accent:#160a02; --on-rose:#160a02; --owl-eye:#0a0a0b; } /* ── Eucalypt — Sage green on warm paper. Calm and quiet; the palette we started with. ── */ [data-palette="eucalypt"]{ --paper:#faf9f7; --panel:#ffffff; --panel-2:#f4f2ee; --ink:#14181a; --ink-2:#3d4744; --muted:#686f6c; --line:#e7e5e1; --line-2:#d8d5cf; --accent:#2f6f5e; --accent-deep:#1f4f43; --accent-text:#2b6555; --accent-wash:#eaf2ef; --amber:#8a5a17; --amber-wash:#fbf3e8; --rose:#a8443c; --on-accent:#ffffff; --on-rose:#ffffff; --owl-eye:#ffffff; } @media (prefers-color-scheme: dark){ [data-palette="eucalypt"]:not([data-mode="light"]){ --paper:#0d1011; --panel:#151a1b; --panel-2:#1b2122; --ink:#e9ecea; --ink-2:#b9c2bf; --muted:#8b9491; --line:#242c2d; --line-2:#2f3839; --accent:#4fae93; --accent-deep:#79c9b1; --accent-text:#4fae93; --accent-wash:#152a25; --amber:#d69a4f; --amber-wash:#2a2116; --rose:#d97a72; --on-accent:#08130f; --on-rose:#08130f; --owl-eye:#0d1011; } } [data-palette="eucalypt"][data-mode="dark"]{ --paper:#0d1011; --panel:#151a1b; --panel-2:#1b2122; --ink:#e9ecea; --ink-2:#b9c2bf; --muted:#8b9491; --line:#242c2d; --line-2:#2f3839; --accent:#4fae93; --accent-deep:#79c9b1; --accent-text:#4fae93; --accent-wash:#152a25; --amber:#d69a4f; --amber-wash:#2a2116; --rose:#d97a72; --on-accent:#08130f; --on-rose:#08130f; --owl-eye:#0d1011; } /* ── Blush — Blush paper, deep wine. Speaks the industry’s own language. ── */ [data-palette="blush"]{ --paper:#fbf7f5; --panel:#ffffff; --panel-2:#f6edeb; --ink:#1f1a1d; --ink-2:#4d4046; --muted:#77676e; --line:#eee0dd; --line-2:#e1cfca; --accent:#7c2f52; --accent-deep:#5c2040; --accent-text:#7c2f52; --accent-wash:#f8ecf1; --amber:#8a6a1a; --amber-wash:#fbf3e8; --rose:#b8352f; --on-accent:#ffffff; --on-rose:#ffffff; --owl-eye:#ffffff; } @media (prefers-color-scheme: dark){ [data-palette="blush"]:not([data-mode="light"]){ --paper:#140f12; --panel:#1c161a; --panel-2:#241c21; --ink:#f4ecef; --ink-2:#c0aeb6; --muted:#9a8891; --line:#2b2126; --line-2:#3a2d33; --accent:#e88bb0; --accent-deep:#f2a8c4; --accent-text:#e88bb0; --accent-wash:#2c1220; --amber:#e0b060; --amber-wash:#2b2113; --rose:#ef7d78; --on-accent:#1a0a11; --on-rose:#1a0a11; --owl-eye:#140f12; } } [data-palette="blush"][data-mode="dark"]{ --paper:#140f12; --panel:#1c161a; --panel-2:#241c21; --ink:#f4ecef; --ink-2:#c0aeb6; --muted:#9a8891; --line:#2b2126; --line-2:#3a2d33; --accent:#e88bb0; --accent-deep:#f2a8c4; --accent-text:#e88bb0; --accent-wash:#2c1220; --amber:#e0b060; --amber-wash:#2b2113; --rose:#ef7d78; --on-accent:#1a0a11; --on-rose:#1a0a11; --owl-eye:#140f12; } /* ── Harbour — Deep navy, aqua signal. The after-hours palette — cool and technical. ── */ [data-palette="harbour"]{ --paper:#f6f9fb; --panel:#ffffff; --panel-2:#eaf0f4; --ink:#0f1519; --ink-2:#37454f; --muted:#5f6d78; --line:#e2e9ee; --line-2:#cfdae2; --accent:#0d7d70; --accent-deep:#095e54; --accent-text:#0b6f63; --accent-wash:#e6f4f1; --amber:#8a6a1a; --amber-wash:#fbf4e3; --rose:#b03a44; --on-accent:#ffffff; --on-rose:#ffffff; --owl-eye:#ffffff; } @media (prefers-color-scheme: dark){ [data-palette="harbour"]:not([data-mode="light"]){ --paper:#0a1017; --panel:#111a24; --panel-2:#18232f; --ink:#e8eef4; --ink-2:#a8b8c6; --muted:#8496a8; --line:#1e2c3a; --line-2:#2a3a4b; --accent:#3fc6b4; --accent-deep:#6fdccb; --accent-text:#3fc6b4; --accent-wash:#0f2a29; --amber:#e0a44a; --amber-wash:#2a2113; --rose:#ef7480; --on-accent:#04150f; --on-rose:#04150f; --owl-eye:#0a1017; } } [data-palette="harbour"][data-mode="dark"]{ --paper:#0a1017; --panel:#111a24; --panel-2:#18232f; --ink:#e8eef4; --ink-2:#a8b8c6; --muted:#8496a8; --line:#1e2c3a; --line-2:#2a3a4b; --accent:#3fc6b4; --accent-deep:#6fdccb; --accent-text:#3fc6b4; --accent-wash:#0f2a29; --amber:#e0a44a; --amber-wash:#2a2113; --rose:#ef7480; --on-accent:#04150f; --on-rose:#04150f; --owl-eye:#0a1017; } /* ── Bone — No brand colour at all — colour is reserved for meaning. ── */ [data-palette="bone"]{ --paper:#f6f5f2; --panel:#fffefc; --panel-2:#eceae5; --ink:#17171a; --ink-2:#41413f; --muted:#696861; --line:#e5e3dd; --line-2:#d5d3cb; --accent:#1d1d1f; --accent-deep:#000000; --accent-text:#1d1d1f; --accent-wash:#eceae5; --amber:#876717; --amber-wash:#f7f0e2; --rose:#9c3b32; --on-accent:#fffefc; --on-rose:#ffffff; --owl-eye:#fffefc; } @media (prefers-color-scheme: dark){ [data-palette="bone"]:not([data-mode="light"]){ --paper:#0f0f0e; --panel:#171716; --panel-2:#1f1f1d; --ink:#f2f1ec; --ink-2:#b8b7b0; --muted:#8b8a82; --line:#262624; --line-2:#33332f; --accent:#f2f1ec; --accent-deep:#ffffff; --accent-text:#f2f1ec; --accent-wash:#262624; --amber:#d9ab52; --amber-wash:#2a2413; --rose:#e8756a; --on-accent:#0f0f0e; --on-rose:#0f0f0e; --owl-eye:#0f0f0e; } } [data-palette="bone"][data-mode="dark"]{ --paper:#0f0f0e; --panel:#171716; --panel-2:#1f1f1d; --ink:#f2f1ec; --ink-2:#b8b7b0; --muted:#8b8a82; --line:#262624; --line-2:#33332f; --accent:#f2f1ec; --accent-deep:#ffffff; --accent-text:#f2f1ec; --accent-wash:#262624; --amber:#d9ab52; --amber-wash:#2a2413; --rose:#e8756a; --on-accent:#0f0f0e; --on-rose:#0f0f0e; --owl-eye:#0f0f0e; }