/* ============================================================================
designs/lime.css — ليموني, the WHOLE design
============================================================================
the Wathib · ITRA profile — its COLOURS only (D5, D6, D7, D9).
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="lime"] {
/* --- Surfaces, text, borders -------------------------------------------
--text 13.99:1 on --card, --text-secondary 5.68:1 / 5.22:1 (card / page),
--text-muted 5.43:1 / 4.99:1, and --border-strong 3.82 / 3.51 / 3.68 on the three surfaces (a CONTROL's
boundary needs 3:1, not 4.5). */
--bg: #f3f6f4;
--bg-secondary: #f9fbfa;
--card: #ffffff;
--card-hover: #e6ece8;
--text: #212e32;
--text-secondary: #576a6f;
--text-muted: #5a6d72;
--border: #cddad2;
--border-strong: #72868b;
/* --- Brand as TEXT -----------------------------------------------------
6.18:1 on --card and 5.68: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: #4f6a06;
--primary-dark: #425905;
--primary-hover: #425905;
--primary-rgb: 79, 106, 6;
--accent: #0b333d;
--accent-rgb: 11, 51, 61;
/* --- Brand as FILL -----------------------------------------------------
--on-primary-fill is 13.5:1 on the fill; --on-primary is
6.18:1 on a FLAT --primary and --on-accent 13.5:1 on --accent. */
--primary-fill: linear-gradient(135deg, #0b333d 0%, #0b333d 100%);
--primary-fill-solid: #0b333d;
--on-primary-fill: #ffffff;
--on-primary: #ffffff;
--on-accent: #ffffff;
/* --- Chrome ------------------------------------------------------------
On --sidebar-bg: text 12.72:1, muted 7.66:1, icon 9.32:1,
and the text still 9.63:1 on the hover. The active item's label is
12.67:1 / 11.01:1 on its two stops and its second line
10.41:1 / 9.05:1. --topbar-icon is 5.68:1 on --topbar-bg, and
--topbar-bg is FLAT because design.js copies it into . */
--sidebar-bg: #0b333d;
--sidebar-bg-top: #104957;
--sidebar-text: #f4f9fa;
--sidebar-muted: #95ccd9;
--sidebar-icon: #bcdce4;
--sidebar-line: #115060;
--sidebar-hover-bg: #0f4755;
--nav-active-a: #b6e561;
--nav-active-b: #a3d84e;
--nav-active-text: #0f1419;
--nav-active-muted: #19282b;
--nav-active-shadow: rgba(182, 229, 97, 0.35);
--topbar-bg: #ffffff;
--topbar-border: #cddad2;
--topbar-icon: #576a6f;
--logo-bg: #0b333d;
--logo-fg: #b6e561;
/* --- Stat chips --------------------------------------------------------
One chip shape for every design (D7): a solid fill under an AA-measured label — here
13.5:1 on the brand chip and 5.68: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: #0b333d;
--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: #576a6f;
--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 deep teal, lime, cyan, sea green,
olive and slate blue. The letters are small bold text, so every label
clears 4.5:1 on its own fill: 5.65, 8.01, 8.03, 5.61, 5.63 and 5.66:1. */
--avatar-1-bg: #187089;
--avatar-1-fg: #ffffff;
--avatar-2-bg: #94d228;
--avatar-2-fg: #222c11;
--avatar-3-bg: #70c8d9;
--avatar-3-fg: #11282c;
--avatar-4-bg: #27754e;
--avatar-4-fg: #ffffff;
--avatar-5-bg: #6d6a20;
--avatar-5-fg: #ffffff;
--avatar-6-bg: #4865a9;
--avatar-6-fg: #ffffff;
/* --- 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: #252e30;
--toast-border: #cddad2;
--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="lime"][data-theme="dark"],
[data-theme="dark"] [data-design="lime"] {
/* --- Surfaces, text, borders -------------------------------------------
--text 12.22:1 on --card, --text-secondary 11.56:1 / 12.78:1 (card / page),
--text-muted 6.71:1 / 7.42:1, and --border-strong 3.25 / 3.59 / 3.11 on the three surfaces (a CONTROL's
boundary needs 3:1, not 4.5). */
--bg: #0b333d;
--bg-secondary: #183d46;
--card: #143a44;
--card-hover: #1e4b57;
--text: #ffffff;
--text-secondary: #f7f9f9;
--text-muted: #b3c3c6;
--border: #21525f;
--border-strong: #6f888d;
/* --- Brand as TEXT -----------------------------------------------------
8.36:1 on --card and 9.24: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: #b6e561;
--primary-dark: #bfe874;
--primary-hover: #bfe874;
--primary-rgb: 182, 229, 97;
--accent: #8fd3e0;
--accent-rgb: 143, 211, 224;
/* --- Brand as FILL -----------------------------------------------------
--on-primary-fill is 12.67:1 on the fill; --on-primary is
12.67:1 on a FLAT --primary and --on-accent 11.07:1 on --accent. */
--primary-fill: linear-gradient(135deg, #b6e561 0%, #b6e561 100%);
--primary-fill-solid: #b6e561;
--on-primary-fill: #0f1419;
--on-primary: #0f1419;
--on-accent: #0f1419;
/* --- Chrome ------------------------------------------------------------
On --sidebar-bg: text 12.84:1, muted 7.47:1, icon 9.12:1,
and the text still 10.33:1 on the hover. The active item's label is
12.67:1 / 11.01:1 on its two stops and its second line
10.53:1 / 9.15:1. --topbar-icon is 11.56:1 on --topbar-bg, and
--topbar-bg is FLAT because design.js copies it into . */
--sidebar-bg: #072229;
--sidebar-bg-top: #0a333e;
--sidebar-text: #d3e6ec;
--sidebar-muted: #6eb9cd;
--sidebar-icon: #94c9d6;
--sidebar-line: #0c3b48;
--sidebar-hover-bg: #0b343f;
--nav-active-a: #b6e561;
--nav-active-b: #a3d84e;
--nav-active-text: #0f1419;
--nav-active-muted: #19272a;
--nav-active-shadow: rgba(182, 229, 97, 0.45);
--topbar-bg: #143a44;
--topbar-border: #21525f;
--topbar-icon: #f7f9f9;
--logo-bg: #072229;
--logo-fg: #b6e561;
/* --- Stat chips --------------------------------------------------------
One chip shape for every design (D7): a solid fill under an AA-measured label — here
12.67:1 on the brand chip and 5.68: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: #b6e561;
--chip-primary-fg: #0f1419;
--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: #576a6f;
--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.81, 7.03, 7.02, 4.86, 4.81 and 4.82:1. */
--avatar-1-bg: #1b7c96;
--avatar-1-fg: #ffffff;
--avatar-2-bg: #8ac525;
--avatar-2-fg: #222c11;
--avatar-3-bg: #54bdd1;
--avatar-3-fg: #11282c;
--avatar-4-bg: #2b8056;
--avatar-4-fg: #ffffff;
--avatar-5-bg: #787523;
--avatar-5-fg: #ffffff;
--avatar-6-bg: #5370b5;
--avatar-6-fg: #ffffff;
/* --- Toasts ------------------------------------------------------------
--toast-text is 12.22:1 on --toast-bg. The close is
the app's own icon and takes --toast-text, like the message. */
--toast-bg: #143a44;
--toast-text: #ffffff;
--toast-border: #21525f;
--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;
}