/* ============================================================================
designs/indigo.css — نيلي, the WHOLE design
============================================================================
sampled from the 1434re.jpg product sheet.
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 four really are one design in different colours
rather than four designs that happen to share a stylesheet. Every colour
the mockups fix (the surfaces, the rail, the active gradient, 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.
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="indigo"] {
/* --- Surfaces, text, borders -------------------------------------------
--text 13.93:1 on --card, --text-secondary 5.65:1 / 5.21:1 (card / page),
--text-muted 5.4:1 / 4.97:1, and --border-strong 3.79 / 3.5 / 3.67 on the three surfaces (a CONTROL's
boundary needs 3:1, not 4.5). */
--bg: #f5f5fc;
--bg-secondary: #fbfbfd;
--card: #ffffff;
--card-hover: #e4e4ee;
--text: #292b3d;
--text-secondary: #62667d;
--text-muted: #656981;
--border: #d6d6e6;
--border-strong: #7f8296;
/* --- Brand as TEXT -----------------------------------------------------
6.71:1 on --card and 6.18: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. */
--primary: #0759b8;
--primary-dark: #0651a7;
--primary-hover: #0651a7;
--primary-rgb: 7, 89, 184;
--accent: #3e4fbe;
--accent-rgb: 62, 79, 190;
/* --- Brand as FILL -----------------------------------------------------
--on-primary-fill is 6.71:1 on the fill; --on-primary is
6.71:1 on a FLAT --primary and --on-accent 6.85:1 on --accent. */
--primary-fill: linear-gradient(135deg, #0759b8 0%, #0759b8 100%);
--primary-fill-solid: #0759b8;
--on-primary-fill: #ffffff;
--on-primary: #ffffff;
--on-accent: #ffffff;
/* --- Chrome ------------------------------------------------------------
On --sidebar-bg: text 14.22:1, muted 7.67:1, icon 9.31:1,
and the text still 12.46:1 on the hover. The active item's label is
5.48:1 / 6.85:1 on its two stops and its second line
4.52:1 / 5.65:1. --topbar-icon is 5.65:1 on --topbar-bg, and
--topbar-bg is FLAT because design.js copies it into . */
--sidebar-bg: #161b39;
--sidebar-bg-top: #1f264f;
--sidebar-text: #ebecef;
--sidebar-muted: #a9aec9;
--sidebar-icon: #bdc0d2;
--sidebar-line: #212957;
--sidebar-hover-bg: #1e254d;
--nav-active-a: #4d5dd4;
--nav-active-b: #3e4fbe;
--nav-active-text: #ffffff;
--nav-active-muted: #e7e9f1;
--nav-active-shadow: rgba(77, 93, 212, 0.35);
--topbar-bg: #ffffff;
--topbar-border: #d6d6e6;
--topbar-icon: #62667d;
--logo-bg: #4d5dd4;
--logo-fg: #ffffff;
/* --- Stat chips --------------------------------------------------------
One chip shape for every design (D7): a solid fill under an AA-measured label — here
6.71:1 on the brand chip and 5.65:1 on the muted one. The four STATUS
chips are the shared signal colours and are identical in all four designs (D9). */
--chip-primary-bg: #0759b8;
--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: #62667d;
--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 royal blue, indigo-violet, teal,
raspberry, green and amber. The letters are small bold text, so every
label clears 4.5:1 on its own fill: 5.61, 5.61, 5.63, 5.60, 5.67 and
8.04:1. */
--avatar-1-bg: #0d63d3;
--avatar-1-fg: #ffffff;
--avatar-2-bg: #7c4fc1;
--avatar-2-fg: #ffffff;
--avatar-3-bg: #0e727e;
--avatar-3-fg: #ffffff;
--avatar-4-bg: #ab4176;
--avatar-4-fg: #ffffff;
--avatar-5-bg: #2c744a;
--avatar-5-fg: #ffffff;
--avatar-6-bg: #edb226;
--avatar-6-fg: #2c2411;
/* --- Toasts ------------------------------------------------------------
--toast-text is 13.89:1 on --toast-bg. The close is
the app's own icon and takes --toast-text, like the message. */
--toast-bg: #ffffff;
--toast-text: #2a2c36;
--toast-border: #d6d6e6;
--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="indigo"][data-theme="dark"],
[data-theme="dark"] [data-design="indigo"] {
/* --- Surfaces, text, borders -------------------------------------------
--text 13.78:1 on --card, --text-secondary 11.6:1 / 12.79:1 (card / page),
--text-muted 6.72:1 / 7.41:1, and --border-strong 3.25 / 3.59 / 3.13 on the three surfaces (a CONTROL's
boundary needs 3:1, not 4.5). */
--bg: #0e1128;
--bg-secondary: #181d43;
--card: #161a3b;
--card-hover: #1e2350;
--text: #e6e8ef;
--text-secondary: #d3d6de;
--text-muted: #9ea3b6;
--border: #2a3170;
--border-strong: #676c83;
/* --- Brand as TEXT -----------------------------------------------------
10.19:1 on --card and 11.23: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. */
--primary: #bcc8f2;
--primary-dark: #ced7f6;
--primary-hover: #ced7f6;
--primary-rgb: 188, 200, 242;
--accent: #b9c2ee;
--accent-rgb: 185, 194, 238;
/* --- Brand as FILL -----------------------------------------------------
--on-primary-fill is 5.01:1 on the fill; --on-primary is
11.18:1 on a FLAT --primary and --on-accent 10.59:1 on --accent. */
--primary-fill: linear-gradient(135deg, #2f6bd6 0%, #2f6bd6 100%);
--primary-fill-solid: #2f6bd6;
--on-primary-fill: #ffffff;
--on-primary: #0f1419;
--on-accent: #0f1419;
/* --- Chrome ------------------------------------------------------------
On --sidebar-bg: text 12.79:1, muted 7.48:1, icon 9.11:1,
and the text still 11.83:1 on the hover. The active item's label is
5.48:1 / 6.85:1 on its two stops and its second line
4.57:1 / 5.71:1. --topbar-icon is 11.6:1 on --topbar-bg, and
--topbar-bg is FLAT because design.js copies it into . */
--sidebar-bg: #0a0d22;
--sidebar-bg-top: #0f1435;
--sidebar-text: #d0d2e1;
--sidebar-muted: #999fcb;
--sidebar-icon: #acb1d1;
--sidebar-line: #12183e;
--sidebar-hover-bg: #101536;
--nav-active-a: #4d5dd4;
--nav-active-b: #3e4fbe;
--nav-active-text: #ffffff;
--nav-active-muted: #e9eaf2;
--nav-active-shadow: rgba(77, 93, 212, 0.45);
--topbar-bg: #161a3b;
--topbar-border: #2a3170;
--topbar-icon: #d3d6de;
--logo-bg: #4d5dd4;
--logo-fg: #ffffff;
/* --- Stat chips --------------------------------------------------------
One chip shape for every design (D7): a solid fill under an AA-measured label — here
5.01:1 on the brand chip and 5.65:1 on the muted one. The four STATUS
chips are the shared signal colours and are identical in all four designs (D9). */
--chip-primary-bg: #2f6bd6;
--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: #62667d;
--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.80, 4.82, 4.80, 4.81, 4.84 and 7.01:1. */
--avatar-1-bg: #0f6de8;
--avatar-1-fg: #ffffff;
--avatar-2-bg: #865cc6;
--avatar-2-fg: #ffffff;
--avatar-3-bg: #0f7e8a;
--avatar-3-fg: #ffffff;
--avatar-4-bg: #ba4982;
--avatar-4-fg: #ffffff;
--avatar-5-bg: #318052;
--avatar-5-fg: #ffffff;
--avatar-6-bg: #e3a412;
--avatar-6-fg: #2c2411;
/* --- Toasts ------------------------------------------------------------
--toast-text is 13.79:1 on --toast-bg. The close is
the app's own icon and takes --toast-text, like the message. */
--toast-bg: #161a3b;
--toast-text: #e7e8ed;
--toast-border: #2a3170;
--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;
}