/* brand-review/system-v4/tokens.css: the locked Kaizn colors with their names (decisions 5585, 5586, 5590, 5596, 5599, 5610).
   v2 (Josh, 2026-10-30, on-page notes): Red is Blood red ("This is my pick for sure", palette-v5 option C); dark-mode glass, cards and fields are Shale ("Let's go with Shale."); Steel stays only as the hover fill of the glass button on dark grounds ("change it to the steel color instead of light grey on hover").
   Every review page from here on links this file first and takes every color from it; a page never types a hex value of its own.
   Names were chosen by Kai (Josh, 2026-10-30, decision 5610: "I'll let you decide what's best there"). Sources: brand-review/colors-v3/colors.css:9-15, brand-review/palette-v3/index.html:27-39. */
@font-face{font-family:'Plus Jakarta Sans';font-weight:500;font-display:swap;src:url('/fonts/PlusJakartaSans-Medium.ttf') format('truetype')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:700;font-display:swap;src:url('/fonts/PlusJakartaSans-Bold.ttf') format('truetype')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:800;font-display:swap;src:url('/fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype')}
@font-face{font-family:'Source Serif 4';font-weight:400;font-display:swap;src:url('/fonts/SourceSerif4-Regular.ttf') format('truetype')}
@font-face{font-family:'Source Serif 4';font-weight:600;font-display:swap;src:url('/fonts/SourceSerif4-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Fira Code';font-weight:300 700;font-display:swap;src:url('/fonts/FiraCode-VariableFont_wght.ttf') format('truetype')}
/* Use (Josh, 2026-10-30, decision 5621): the brand is Ink, Navy, White and Orange-red, with Green and Blue on the strip cards. The other colors of the thirteen are indicators only (status, categories, callouts, badges), used sparingly, never decoration. */
/* 1. Named colors. Grounds and bands, glass tints, text, highlight, then the thirteen colors.
   Each of the thirteen has four stops: -ld and -ll are the dark and light stop in the light theme, -dd and -dl in the dark theme. */
:root{
--ink:#0B0D12;--navy:#022448;--white:#FFFFFF;--mist:#F3F5F8;--slate:#161A22;--night:#07080B;
--frost:#E3E9F4;--steel:#1B2433;--shale:#1F232C;
--graphite:#243447;--pewter:#55647A;--snow:#F1F5FA;--silver:#CFD9E6;--fog:#9DAEC4;
--yellow:#FFB81F;--midnight:#14192E;
--red-ld:#8F1617;--red-ll:#BE2223;--red-dd:#851415;--red-dl:#BE2223;
--orange-red-ld:#912A00;--orange-red-ll:#C95510;--orange-red-dd:#952D02;--orange-red-dl:#C95510;
--brown-ld:#643D17;--brown-ll:#996222;--brown-dd:#553515;--brown-dl:#87571F;
--lime-ld:#4B6003;--lime-ll:#657F02;--lime-dd:#435500;--lime-dl:#5C7404;
--green-ld:#02542A;--green-ll:#1C8449;--green-dd:#004521;--green-dl:#17703F;
--teal-ld:#02655C;--teal-ll:#088478;--teal-dd:#045A51;--teal-dl:#007A6F;
--cyan-ld:#04626F;--cyan-ll:#008192;--cyan-dd:#005764;--cyan-dl:#017686;
--sky-ld:#005E85;--sky-ll:#017DB1;--sky-dd:#035377;--sky-dl:#07719F;
--blue-ld:#024686;--blue-ll:#2563EB;--blue-dd:#013679;--blue-dl:#1E5BB8;
--violet-ld:#5042AA;--violet-ll:#6D5BE4;--violet-dd:#473D93;--violet-dl:#6152CA;
--purple-ld:#6D369B;--purple-ll:#944BD0;--purple-dd:#603486;--purple-dl:#8344B9;
--magenta-ld:#832B82;--magenta-ll:#B03CB0;--magenta-dd:#722B71;--magenta-dl:#9C379C;
--pink-ld:#932161;--pink-ll:#C52F84;--pink-dd:#802456;--pink-dl:#AF2C75;
--fd:'Plus Jakarta Sans',system-ui,sans-serif;--fb:'Source Serif 4',Georgia,serif;--fm:'Fira Code',ui-monospace,Menlo,monospace;
--bevel-sm:3px;--bevel-ctl:3px;--bevel-md:5px;--bevel-lg:9px;--bevel-xl:16px}
/* 2. Roles, light theme. -a and -b are each color's gradient start and end in the current theme (135 degrees, start to end). */
:root{color-scheme:light;
--ground:var(--white);--wash:var(--mist);--tint:var(--frost);--ta:60%;--ov:var(--white);--bandbg:var(--navy);
--h:var(--navy);--tx:var(--graphite);--mu:var(--pewter);--ac:#B0370F;--hl:var(--yellow);--onhl:var(--midnight);
--it:var(--navy);--it2:var(--graphite);--it3:var(--graphite);
--pg:#E2E8F0;--bar:#F5F7FB;--line:#7D8CA3;--chip:rgba(2,36,72,.30);--edge:rgba(2,36,72,.10);--gl:rgba(2,36,72,.16);--focus:#1F5FBF;--accent:#B0370F;--sel:var(--navy);--onsel:var(--white);
--red-a:var(--red-ld);--red-b:var(--red-ll);--orange-red-a:var(--orange-red-ld);--orange-red-b:var(--orange-red-ll);--brown-a:var(--brown-ld);--brown-b:var(--brown-ll);--lime-a:var(--lime-ld);--lime-b:var(--lime-ll);--green-a:var(--green-ld);--green-b:var(--green-ll);--teal-a:var(--teal-ld);--teal-b:var(--teal-ll);--cyan-a:var(--cyan-ld);--cyan-b:var(--cyan-ll);--sky-a:var(--sky-ld);--sky-b:var(--sky-ll);--blue-a:var(--blue-ld);--blue-b:var(--blue-ll);--violet-a:var(--violet-ld);--violet-b:var(--violet-ll);--purple-a:var(--purple-ld);--purple-b:var(--purple-ll);--magenta-a:var(--magenta-ld);--magenta-b:var(--magenta-ll);--pink-a:var(--pink-ld);--pink-b:var(--pink-ll);
--cta-a:var(--orange-red-a);--cta-b:var(--orange-red-b);
--card-orange-a:var(--orange-red-a);--card-orange-b:var(--orange-red-b);--card-green-a:var(--green-a);--card-green-b:var(--green-b);--card-blue-a:var(--navy);--card-blue-b:var(--blue-ll)}
/* 3. Roles, dark theme. */
:root.dark{color-scheme:dark;
--ground:var(--ink);--wash:var(--slate);--tint:var(--shale);--ta:60%;--ov:var(--night);--bandbg:var(--navy);
--h:var(--snow);--tx:var(--silver);--mu:var(--fog);--ac:#FF6933;--hl:var(--yellow);--onhl:var(--midnight);
--it:var(--white);--it2:var(--white);--it3:#C9D6E8;
--pg:#1E2530;--bar:#141A23;--line:#4A5A74;--chip:rgba(255,255,255,.30);--edge:rgba(255,255,255,.12);--gl:rgba(255,255,255,.12);--focus:#86B6F7;--accent:#FF6933;--sel:var(--snow);--onsel:#0B1018;
--red-a:var(--red-dd);--red-b:var(--red-dl);--orange-red-a:var(--orange-red-dd);--orange-red-b:var(--orange-red-dl);--brown-a:var(--brown-dd);--brown-b:var(--brown-dl);--lime-a:var(--lime-dd);--lime-b:var(--lime-dl);--green-a:var(--green-dd);--green-b:var(--green-dl);--teal-a:var(--teal-dd);--teal-b:var(--teal-dl);--cyan-a:var(--cyan-dd);--cyan-b:var(--cyan-dl);--sky-a:var(--sky-dd);--sky-b:var(--sky-dl);--blue-a:var(--blue-dd);--blue-b:var(--blue-dl);--violet-a:var(--violet-dd);--violet-b:var(--violet-dl);--purple-a:var(--purple-dd);--purple-b:var(--purple-dl);--magenta-a:var(--magenta-dd);--magenta-b:var(--magenta-dl);--pink-a:var(--pink-dd);--pink-b:var(--pink-dl);
--card-blue-a:#12396F;--card-blue-b:var(--blue-dl)}
/* 4. The bevel recipe, kaizn/brand/2026-10-19-beveled-corners-spec-v01.md, copied as is from brand-review/colors-v3/colors.css:16-29. Cut corners on every box, never rounded, never square. */
/* the bevel recipe, kaizn/brand/2026-10-19-beveled-corners-spec-v01.md, copied as is (the Love, Neutral and Hate buttons that react.js adds take it too) */
:where(.bevel,.react button){--cut:var(--bevel-md);--band:1px;--band-color:currentColor;position:relative}
.bevel,.react button{--ring:var(--band);--cut-in:calc(var(--cut) + var(--ring) * .414);border:var(--band) solid var(--band-color);outline:0;border-radius:var(--cut);corner-shape:bevel;box-shadow:inset 0 0 0 calc(var(--ring) - var(--band)) var(--band-color)}
.bevel:hover,.react button:hover{--band-color:var(--accent)}
.bevel:focus-visible,.bevel:has(:focus-visible),.react button:focus-visible{--band-color:var(--focus);--ring:calc(var(--band) + 2px)}
/* v4 (shell-v4/shell.css:107, now system-wide, decisions 5681 and 5697): a container with .bx (a panel, bar, frame, row or glass card) never takes the focus ring of a control inside it; only the focused control shows the ring. A wrapper that IS the field (.sf, a search field) keeps the :has() ring above. */
.bx:has(:focus-visible):not(.sf):not(:focus-visible){--band-color:var(--bc);--ring:var(--band)}
.bevel-in{display:block}
@supports (corner-shape:bevel){.bevel-in{border-radius:calc(var(--cut) - var(--band));corner-shape:bevel}}
@supports not (corner-shape:bevel){
.bevel,.react button{border:var(--band) solid transparent;border-radius:0;box-shadow:none;clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.bevel::after,.react button::after{content:"";position:absolute;inset:calc(-1 * var(--band));pointer-events:none;background:var(--band-color);clip-path:polygon(evenodd,var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut),var(--cut) 0,var(--cut-in) var(--ring),var(--ring) var(--cut-in),var(--ring) calc(100% - var(--cut-in)),var(--cut-in) calc(100% - var(--ring)),calc(100% - var(--cut-in)) calc(100% - var(--ring)),calc(100% - var(--ring)) calc(100% - var(--cut-in)),calc(100% - var(--ring)) var(--cut-in),calc(100% - var(--cut-in)) var(--ring),var(--cut-in) var(--ring),var(--cut) 0)}
mark{border-radius:0}
}
/* a static box keeps its own band on hover */
.bx,.bx:hover{--band-color:var(--bc)}

/* 5. v4 additions (decision 5695: everything approved goes into the system). Token names for the website, Kairos and Academy builders. */
/* 5a. Picture overlay: one flat color at 60 percent in both themes, no gradient (Josh, decision 5690: "60% opacity across the board"; brand-review/backgrounds-v4/, library-v4/library.css:133). The color is --ov (White in light, Night in dark). */
:root{--str:60%;--glass-blur:14px;--glass-solid:94%;--c1:var(--blue-ll);--c2:var(--orange-red-ll)}
/* 5b. Glass recipe (library-v4, shell-v4, decision 5697): --tint at --ta (60 percent) over the picture, blur 14px, hairline band --gl; solid fallback at 94 percent. Defined as .glass in base.css. */
/* 5c. Chart Pair A, the default for every two-series chart (Josh, decision 5686; boards-v4/boards.css:82): series one Blue, series two Orange-red. */
/* 5d. Progress (Josh, decision 5685; states-v4/states.css:66-67): the fill is Orange-red until the value is 100 percent AND the fill has visibly reached the end of the track; only then Green. */
:root{--progress-a:var(--cta-a);--progress-b:var(--cta-b);--progress-done-a:var(--green-a);--progress-done-b:var(--green-b)}
/* 5e. Date text (Josh, decision 5678; tables-v4/tables.css:133): a date before today is Red text, a date due today is Orange-red text, never a badge. --late is Red (#BE2223, 6.1:1 on White). --due-today is --ac (#B0370F light, #FF6933 dark) because Orange-red -ll measures 4.4:1 on White and on Ink. */
:root{--late:var(--red-ll);--due-today:var(--ac)}
:root.dark{--late:#FF5A52}
/* grid lines (decisions 5795, 5802, 5805, 5811): light 6 percent; dark 3 percent on plain and picture sections */
:root{--grid:6%;--grid-pic:6%}
:root.dark{--grid:3%;--grid-pic:3%}
/* 5f. Kairos nav item colors, icon and text per item (Josh, decision 5681; shell-v4/shell.css:68-72), measured 5.1 to 6.8:1 on glass over the picture at the 60 percent overlay. */
:root{--nav-home:var(--orange-red-ld);--nav-requests:color-mix(in srgb,var(--violet-ld) 90%,var(--navy));--nav-projects:color-mix(in srgb,var(--teal-ld) 80%,var(--navy));--nav-library:color-mix(in srgb,var(--magenta-ld) 90%,var(--navy));--nav-money:var(--green-ld);--nav-sales:var(--blue-ld);--nav-settings:color-mix(in srgb,var(--pewter) 50%,var(--navy))}
:root.dark{--nav-home:var(--ac);--nav-requests:color-mix(in srgb,var(--violet-dl) 62%,var(--white));--nav-projects:color-mix(in srgb,var(--teal-dl) 62%,var(--white));--nav-library:color-mix(in srgb,var(--magenta-dl) 62%,var(--white));--nav-money:color-mix(in srgb,var(--green-dl) 62%,var(--white));--nav-sales:color-mix(in srgb,var(--blue-dl) 62%,var(--white));--nav-settings:var(--mu)}