/* ============================================================================
designs/burgundy.css — عنّابي, the WHOLE design
============================================================================
sampled from the tibyan-option3-anab light and dark sheets: a burgundy brand
with a peach second colour, on warm off-white and warm near-black surfaces.
A design is TWO RULES holding CUSTOM PROPERTIES, and nothing else. No
selector, no media query, no @font-face, no image, no font family, no
radius: what differs between designs is a COLOUR, because the shapes, the
sizes, the type and the structure are the app's and live in _variables.css
(D5, D9). DesignTokensTest fails this file if any of that stops being true,
and compares its property set against violet.css's in both directions.
This file was GENERATED from violet.css's own tonal structure — the same
ratios between body text, muted text and the surfaces, the same lift from
the page to the card, the same rail brightness — re-expressed in this
design's hues, so the designs really are one design in different colours.
Every colour the sheets fix (the page, the card, the table-header surface,
the dark rail, the active item, the top bar, the brand text and the brand
fill) is the drawn value, and every ratio in a comment below was computed
from the value beside it.
ONE departure from the light sheet, on purpose: it draws a WHITE rail, and
the rail here is DARK in both themes, as it is in every design. Two shared
rules outside this file depend on that: the installed iPhone app draws its
white status-bar clock over --sidebar-bg, and the login page draws its brand
mark's box and its point icons in --logo-fg on --sidebar-bg. A white rail
would put white on white in both places.
Why the dark rule has two selectors: on only the compound form
matches, while a nested element carrying its own data-design — the picker's
swatch — is matched by the descendant form and so follows the PAGE's theme
with no script. In a light page neither matches.
============================================================================ */
[data-design="burgundy"] {
/* --- Surfaces, text, borders -------------------------------------------
--text 13.93:1 on --card, --text-secondary 5.67:1 / 5.03:1 (card / page),
--text-muted 5.39:1 / 4.79:1, and --border-strong 3.82 / 3.39 / 3.54 on the three surfaces (a CONTROL's
boundary needs 3:1, not 4.5). --bg-secondary is the sheet's table-header row. */
--bg: #f6f0ef;
--bg-secondary: #faf5f4;
--card: #ffffff;
--card-hover: #eee5e4;
--text: #3c262d;
--text-secondary: #7d5f67;
--text-muted: #81626b;
--border: #e3d4d1;
--border-strong: #987b83;
/* --- Brand as TEXT -----------------------------------------------------
10.17:1 on --card and 9.02:1 on --bg. This is the colour that reads as TEXT;
the one a label sits ON is --primary-fill below, and they are not the same.
--accent is the COPPER shade of the sheet's peach (#f0a06b is 2.11:1 as text):
5.99:1 / 5.32:1. */
--primary: #7a1d3a;
--primary-dark: #701b35;
--primary-hover: #701b35;
--primary-rgb: 122, 29, 58;
--accent: #9a4f17;
--accent-rgb: 154, 79, 23;
/* --- Brand as FILL -----------------------------------------------------
--on-primary-fill is 10.17:1 on the fill; --on-primary is
10.17:1 on a FLAT --primary and --on-accent 5.99:1 on --accent. */
--primary-fill: linear-gradient(135deg, #7a1d3a 0%, #7a1d3a 100%);
--primary-fill-solid: #7a1d3a;
--on-primary-fill: #ffffff;
--on-primary: #ffffff;
--on-accent: #ffffff;
/* --- Chrome ------------------------------------------------------------
The rail is DARK although the light sheet draws it white — see the
header. It is the sheet's heading ink.
On --sidebar-bg: text 14.24:1, muted 7.67:1, icon 9.29:1,
and the text still 12.21:1 on the hover. The active item's label is
10.17:1 on its flat fill and its second line 8.41:1.
--topbar-bg is the PAGE colour, as the sheet draws the bar; --topbar-icon is
5.69:1 on it. It is FLAT because design.js copies it into . */
--sidebar-bg: #2b171e;
--sidebar-bg-top: #3f222c;
--sidebar-text: #f1eaec;
--sidebar-muted: #c0a9af;
--sidebar-icon: #d0bbc1;
--sidebar-line: #462531;
--sidebar-hover-bg: #3d212b;
--nav-active-a: #7a1d3a;
--nav-active-b: #7a1d3a;
--nav-active-text: #ffffff;
--nav-active-muted: #f4e6ea;
--nav-active-shadow: rgba(122, 29, 58, 0.35);
--topbar-bg: #f6f0ef;
--topbar-border: #e3d4d1;
--topbar-icon: #74575f;
--logo-bg: #7a1d3a;
--logo-fg: #ffffff;
/* --- Stat chips --------------------------------------------------------
One chip shape for every design (D7): a solid fill under an AA-measured label — here
10.17:1 on the brand chip and 5.67:1 on the muted one. The four STATUS
chips are the shared signal colours and are identical in every design (D9). */
--chip-primary-bg: #7a1d3a;
--chip-primary-fg: #ffffff;
--chip-success-bg: #047857;
--chip-success-fg: #ffffff;
--chip-danger-bg: #dc2626;
--chip-danger-fg: #ffffff;
--chip-warning-bg: #f59e0b;
--chip-warning-fg: #1f2937;
--chip-info-bg: #2563eb;
--chip-info-fg: #ffffff;
--chip-muted-bg: #7d5f67;
--chip-muted-fg: #ffffff;
/* --- People (avatar stacks) --------------------------------------------
The initials circles of every people column (common/avatar-stack.js). A
person keeps ONE index everywhere, a hash of their id, and each design
paints the six in its own hues: here burgundy, peach, teal green, slate
blue, olive and mauve. The letters are small bold text, so every label
clears 4.5:1 on its own fill: 5.61, 8.03, 5.64, 5.60, 5.62 and 5.63:1. */
--avatar-1-bg: #bf2d5b;
--avatar-1-fg: #ffffff;
--avatar-2-bg: #f1a470;
--avatar-2-fg: #2c1c11;
--avatar-3-bg: #1f745f;
--avatar-3-fg: #ffffff;
--avatar-4-bg: #456c87;
--avatar-4-fg: #ffffff;
--avatar-5-bg: #616d2d;
--avatar-5-fg: #ffffff;
--avatar-6-bg: #924e92;
--avatar-6-fg: #ffffff;
/* --- Toasts ------------------------------------------------------------
--toast-text is 13.90:1 on --toast-bg. The close is
the app's own icon and takes --toast-text, like the message. */
--toast-bg: #ffffff;
--toast-text: #36292c;
--toast-border: #e3d4d1;
--toast-icon-success-bg: #047857;
--toast-icon-success-fg: #ffffff;
--toast-icon-danger-bg: #dc2626;
--toast-icon-danger-fg: #ffffff;
--toast-icon-warning-bg: #f59e0b;
--toast-icon-warning-fg: #1f2937;
}
[data-design="burgundy"][data-theme="dark"],
[data-theme="dark"] [data-design="burgundy"] {
/* --- Surfaces, text, borders -------------------------------------------
--text 13.80:1 on --card, --text-secondary 11.60:1 / 12.31:1 (card / page),
--text-muted 6.69:1 / 7.10:1, and --border-strong 3.26 / 3.46 / 3.05 on the three surfaces (a CONTROL's
boundary needs 3:1, not 4.5). --bg-secondary is the sheet's table-header row. */
--bg: #140b0f;
--bg-secondary: #251820;
--card: #1d1217;
--card-hover: #2f1d25;
--text: #e9dde0;
--text-secondary: #d8cbce;
--text-muted: #b0969e;
--border: #442a36;
--border-strong: #7b6168;
/* --- Brand as TEXT -----------------------------------------------------
7.72:1 on --card and 8.20:1 on --bg. This is the colour that reads as TEXT;
the one a label sits ON is --primary-fill below, and they are not the same.
--accent is the sheet's peach, 9.92:1 / 10.53:1. */
--primary: #f08aa6;
--primary-dark: #f39eb5;
--primary-hover: #f39eb5;
--primary-rgb: 240, 138, 166;
--accent: #f5b083;
--accent-rgb: 245, 176, 131;
/* --- Brand as FILL -----------------------------------------------------
--on-primary-fill is 11.50:1 on the fill; --on-primary is
8.20:1 on a FLAT --primary and --on-accent 10.53:1 on --accent. */
--primary-fill: linear-gradient(135deg, #6b1a36 0%, #6b1a36 100%);
--primary-fill-solid: #6b1a36;
--on-primary-fill: #ffffff;
--on-primary: #140b0f;
--on-accent: #140b0f;
/* --- Chrome ------------------------------------------------------------
The rail is the sheet's own: the card colour, split from the page by
--sidebar-line.
On --sidebar-bg: text 12.87:1, muted 7.48:1, icon 9.09:1,
and the text still 11.37:1 on the hover. The active item's label is
11.50:1 on its flat fill and its second line 9.60:1.
--topbar-bg is the PAGE colour, as the sheet draws the bar; --topbar-icon is
11.62:1 on it. It is FLAT because design.js copies it into . */
--sidebar-bg: #1d1217;
--sidebar-bg-top: #2c1b23;
--sidebar-text: #e4d5d9;
--sidebar-muted: #ba9fa7;
--sidebar-icon: #c9b1b8;
--sidebar-line: #33232a;
--sidebar-hover-bg: #2d1c24;
--nav-active-a: #6b1a36;
--nav-active-b: #6b1a36;
--nav-active-text: #ffffff;
--nav-active-muted: #f5e7ec;
--nav-active-shadow: rgba(107, 26, 54, 0.45);
--topbar-bg: #140b0f;
--topbar-border: #442a36;
--topbar-icon: #d3c5c9;
--logo-bg: #6b1a36;
--logo-fg: #ffffff;
/* --- Stat chips --------------------------------------------------------
One chip shape for every design (D7): a solid fill under an AA-measured label — here
11.50:1 on the brand chip and 5.67:1 on the muted one. The four STATUS
chips are the shared signal colours and are identical in every design (D9). */
--chip-primary-bg: #6b1a36;
--chip-primary-fg: #ffffff;
--chip-success-bg: #047857;
--chip-success-fg: #ffffff;
--chip-danger-bg: #dc2626;
--chip-danger-fg: #ffffff;
--chip-warning-bg: #f59e0b;
--chip-warning-fg: #1f2937;
--chip-info-bg: #2563eb;
--chip-info-fg: #ffffff;
--chip-muted-bg: #7d5f67;
--chip-muted-fg: #ffffff;
/* --- People (avatar stacks) --------------------------------------------
The same six hues a step lighter, so a circle stands off the dark card;
the labels: 4.84, 7.03, 4.82, 4.85, 4.83 and 4.82:1. */
--avatar-1-bg: #cf3466;
--avatar-1-fg: #ffffff;
--avatar-2-bg: #ee9457;
--avatar-2-fg: #2c1c11;
--avatar-3-bg: #228069;
--avatar-3-fg: #ffffff;
--avatar-4-bg: #4c7694;
--avatar-4-fg: #ffffff;
--avatar-5-bg: #6a7831;
--avatar-5-fg: #ffffff;
--avatar-6-bg: #a156a1;
--avatar-6-fg: #ffffff;
/* --- Toasts ------------------------------------------------------------
--toast-text is 13.80:1 on --toast-bg. The close is
the app's own icon and takes --toast-text, like the message. */
--toast-bg: #1d1217;
--toast-text: #e6dee0;
--toast-border: #442a36;
--toast-icon-success-bg: #047857;
--toast-icon-success-fg: #ffffff;
--toast-icon-danger-bg: #dc2626;
--toast-icon-danger-fg: #ffffff;
--toast-icon-warning-bg: #f59e0b;
--toast-icon-warning-fg: #1f2937;
}