/* ═══════════════════════════════════════════════════════════════════════════
   TWO LAYOUTS × TWO THEMES

   One app, two axes, four combinations. They are independent: the layout is
   the shape of a screen, the theme is the light it is read in, and a rep sets
   each without disturbing the other.

     LAYOUT — how a screen is built
       boxy      cards on a field, with borders, radii and elevation
       minimal   no cards; a ground, hairlines, and full-bleed for emphasis

     THEME — what it is made of
       light     paper
       dark      stone

   Every token the app's screens read is defined once per combination. A
   screen that wants a colour asks for a token here — it never writes a hex of
   its own, which is what keeps the four from drifting apart as pages are
   added. The token NAMES are identical across all four, always; only their
   values change. That is the whole contract.

   CONTRAST AT EVERY LEVEL in boxy: ground, card, sunk card and border are
   four separate values, and the border is always visible on its own. Nothing
   is distinguished by a 2% tint. In minimal there is no card to separate —
   the hairline and the full-bleed band do that work instead.

   `--now*` IS GREEN, AND THAT IS THE POINT. It is the ground of a client who
   is in their showroom this second, and a client opening their showroom is a
   sale starting — the one alert a rep should want to see. The family was red
   until 0028 and read as an emergency. The two must never wear the same
   colour, because the whole board is read at a glance and the glance is what
   decides which one a rep thinks they are looking at.

   `--urge*` IS ORANGE, AND IT TOOK THE NOTIFICATIONS OFF `--alarm`. A person
   waiting on a reply is not a failure of the system, it is a job with a clock
   on it — and painting it red said "something has broken" about the ordinary
   case of a client asking a question. So since 0035 there are three steps,
   and a rep can tell them apart without reading a word:

     --wrote   amber   she wrote, the clock is running, you can still beat it
     --urge    orange  the clock ran out, or nobody is on her at all
     --alarm   red     something is wrong — a hold lapsed, a slab is damaged,
                       a client is lost, a password did not work

   Red is now reserved for that third line. Anything that is only *late* —
   an unread count, an unclaimed client, the escalation past three minutes,
   the manager's "3 clients waiting on a reply" — reads `--urge`, which sits
   far enough from `--wrote` in all four combinations that the three-minute
   step is still visible at a glance.

   The three colourways this replaced were `vava`, `light` and `navy`. Vava's
   blue field is folded away: two layouts × two themes leaves one light boxy
   ground, and the neutral one is the one that lets the two layouts differ by
   shape rather than by hue. `?palette=` still resolves — see concepts.js.

   Brand source: html/portal/css/global.css → --accent #0e7ed3,
   --primary-dark #0a68b0, --primary-50 #e8f2fb.
   ═══════════════════════════════════════════════════════════════════════════ */

.cb {
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  font-family: var(--sans);
  color: var(--ink);
}

/* ── The layout axis · shape ───────────────────────────────────────────────
   The only two values that belong to shape rather than to colour. Everything
   a screen rounds reads one of them, so squaring the app is one line and not
   seventy. Minimal caps at 7px — the app's own ceiling — and its 2px is the
   slab swatch, the one radius the editorial design draws. */

[data-layout="boxy"] .cb    { --r: 10px; --r-sm: 6px; }
[data-layout="minimal"] .cb { --r: 7px;  --r-sm: 2px; }

/* ── Boxy · Light — neutral grey field, white cards ────────────────────── */

[data-layout="boxy"][data-theme="light"] .cb {
  --ground:      #E7EAEE;
  --ground-top:  #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #F3F4F7;
  --line:        #C4C9D1;
  --line-soft:   #DDE0E6;
  --ink:         #090B0E;
  --soft:        #42474F;
  --mute:        #737983;
  --mute-2:      #6B717C;
  --accent:      #0E7ED3;
  --accent-deep: #0A68B0;
  --accent-wash: #DDECF9;
  --on-accent:   #FFFFFF;
  --alarm:       #CE2018;
  --alarm-2:     #F04434;
  --alarm-wash:  #FADDDA;
  --on-alarm:    #FFFFFF;
  --wrote:       #E0A11B;
  --on-wrote:    #3A2603;
  --wrote-wash:  #FAEED2;
  --wrote-line:  #E4C67C;
  --wrote-ink:   #3A2603;
  --wrote-body:  #4E4326;
  --wrote-mute:  #6E5E33;
  --wrote-soft:  #635C50;
  --wrote-2:     #7E6010;
  --urge:        #C2410C;
  --urge-2:      #9A3412;   /* the fill is 4.5:1 as 11px text — this is 6.4:1 */
  --urge-wash:   #FCE3CB;   /* peach, not cream — #FAEED2 is the band next to it */
  --on-urge:     #FFFFFF;
  --mark-bg:     #DEEDFA;
  --now:         #E4F4EA;
  --now-line:    #A9D7BC;
  --now-line-2:  #CBE8D7;
  --now-sunk:    #D6EDE0;
  --warm:        #A85B08;
  --good:        #147247;
  --good-2:      #1F9C64;
  --good-wash:   #D6EDE0;
  --on-good:     #FFFFFF;
  --shadow:      0 1px 2px rgba(9, 11, 14, .1), 0 6px 16px -8px rgba(9, 11, 14, .18);
  --shadow-lift: 0 2px 6px rgba(9, 11, 14, .14), 0 14px 30px -12px rgba(9, 11, 14, .28);
  --shell-bezel: #16181C;
}

/* ── Boxy · Dark — five tonalities of blue ─────────────────────────────── */
/*   ground #061424  →  header #0B1E33  →  sunk #0E2237  →  card #143050
     →  border #2B5178. Every level is a step, never a tint. */

[data-layout="boxy"][data-theme="dark"] .cb {
  --ground:      #061424;
  --ground-top:  #0B1E33;
  --surface:     #143050;
  --surface-2:   #0E2237;
  --line:        #2B5178;
  --line-soft:   #1E3D5C;
  --ink:         #EBF3FB;
  --soft:        #A2BDD6;
  --mute:        #7093B0;
  --mute-2:      #6A8CAA;
  --accent:      #4FA8F5;
  --accent-deep: #82C4FA;
  --accent-wash: #10395F;
  --on-accent:   #061424;   /* the ground — white on this blue is 2.4:1 and fails */
  --alarm:       #FF4D52;
  --alarm-2:     #FF8A8D;
  --alarm-wash:  #4A1620;
  --on-alarm:    #2A0508;   /* white on this red is 2.8:1 and fails */
  --wrote:       #E8AC22;
  --on-wrote:    #2A1B02;
  --wrote-wash:  #3A2C0C;   /* dark amber ground — a step, never a tint */
  --wrote-line:  #6E5518;
  --wrote-ink:   #F5DCA0;   /* --on-wrote here is near-black and vanishes */
  --wrote-body:  #E4D2A8;
  --wrote-mute:  #C4AC72;
  --wrote-soft:  #CFC5AE;
  --wrote-2:     #E8AC22;   /* the wash is dark here, so the fill reads as text */
  --urge:        #FF8A3D;
  --urge-2:      #FF8A3D;   /* same: 5.7:1 on the card, 5.8:1 on its own wash */
  --urge-wash:   #4A2410;   /* dark orange ground — a step, never a tint */
  --on-urge:     #2A1102;   /* white on this orange is 2.3:1 and fails */
  --mark-bg:     #1D4470;   /* a step lighter than the card */
  --now:         #10352A;   /* lighter than ground, greener than the card */
  --now-line:    #2F7659;
  --now-line-2:  #1F5340;
  --now-sunk:    #0A2419;
  --warm:        #F0A227;
  --good:        #35BC85;
  --good-2:      #6FD9AB;
  --good-wash:   #14402F;
  --on-good:     #04241A;   /* white on this green is 2.4:1 and fails */
  --shadow:      0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px -8px rgba(0, 0, 0, .6);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .6), 0 16px 34px -14px rgba(0, 0, 0, .9);
  --shell-bezel: #000000;
}

/* ── Minimal · Light and Dark — editorial, paper and stone ───────────────
   From the design handoff's 4A and 4B, which are one design in two grounds.
   Values it names are exact; card, sunk card, border, shadow and bezel are
   derived here, because the editorial screens have none to take them from
   and the boxy screens still read those tokens.

   THE BAND IS THE SAME CREAM IN BOTH. `--wrote-wash` and every token that
   sits on it are identical light and dark — that is the whole idea of the
   pair, and it is why the wash carries its own text set rather than reusing
   `--ink` and `--soft`, which invert with the ground.

   THE GOLD IS TWO COLOURS. `--wrote` #B79458 is a FILL — dots, bars, rails.
   As text on paper it measures 2.41:1, so `--accent` carries the readable
   gold and every screen that writes `color: var(--accent)` keeps working. */

[data-layout="minimal"][data-theme="light"] .cb {
  --ground:      #FBFBFA;
  --ground-top:  #FBFBFA;   /* one ground: this layout has no header block */
  --surface:     #FFFFFF;
  --surface-2:   #F4F3F0;
  --line:        #DBDAD5;
  --line-soft:   #ECEDEF;
  --ink:         #20252C;
  --soft:        #4A5561;
  --mute:        #616A75;
  --mute-2:      #5E6673;
  --accent:      #75601F;   /* gold as TEXT — #B79458 is 2.41:1 and fails */
  --accent-deep: #5F4D19;
  --accent-wash: #F4ECD9;
  --on-accent:   #FFFFFF;
  --alarm:       #B4444F;
  --alarm-2:     #C86C74;
  --alarm-wash:  #F6E6E7;
  --on-alarm:    #FFFFFF;
  --wrote:       #B79458;   /* gold as FILL */
  --on-wrote:    #20252C;
  --wrote-wash:  #F4ECD9;
  --wrote-line:  #E0D2B2;
  --wrote-ink:   #20252C;
  --wrote-body:  #4A5561;
  --wrote-mute:  #6E6448;
  --wrote-soft:  #6B655C;
  --wrote-2:     #75601F;
  --urge:        #A8551B;   /* burnt, not bright — this layout has no loud hue */
  --urge-2:      #8A4415;
  --urge-wash:   #F8DCC0;   /* peach, not cream — #F4ECD9 is the band next to it */
  --on-urge:     #FFFFFF;
  --mark-bg:     #F4ECD9;
  --now:         #EAF3EE;
  --now-line:    #C6DFD2;
  --now-line-2:  #DCEBE3;
  --now-sunk:    #E0EEE7;
  --warm:        #7E6010;
  --good:        #2C7A62;
  --good-2:      #3E9C80;
  --good-wash:   #DDEEE6;
  --on-good:     #FFFFFF;
  --shadow:      0 1px 2px rgba(32, 37, 44, .07), 0 6px 16px -8px rgba(32, 37, 44, .16);
  --shadow-lift: 0 2px 6px rgba(32, 37, 44, .1), 0 14px 30px -12px rgba(32, 37, 44, .26);
  --shell-bezel: #2B2A27;
}

[data-layout="minimal"][data-theme="dark"] .cb {
  --ground:      #101214;
  --ground-top:  #101214;
  --surface:     #1A1D21;   /* the sheet's ground, and every card's */
  --surface-2:   #16181B;
  --line:        rgba(245, 243, 238, .12);
  --line-soft:   rgba(245, 243, 238, .09);
  --ink:         #F5F3EE;
  --soft:        #B9C0C8;
  --mute:        #7A8189;
  --mute-2:      #8F98A4;
  --accent:      #D8B87E;
  --accent-deep: #E8CE9F;
  --accent-wash: #2B2519;
  --on-accent:   #20252C;
  --alarm:       #E7A9AE;
  --alarm-2:     #F0C4C7;
  --alarm-wash:  #38191C;
  --on-alarm:    #20252C;
  --wrote:       #B79458;
  --on-wrote:    #20252C;
  --wrote-wash:  #F4ECD9;   /* the cream does NOT darken — see above */
  --wrote-line:  #E0D2B2;
  --wrote-ink:   #20252C;
  --wrote-body:  #4A5561;
  --wrote-mute:  #6E6448;
  --wrote-soft:  #6B655C;
  --wrote-2:     #75601F;
  --urge:        #E8905A;   /* peach, not tan — #B79458 is the gold it must not be */
  --urge-2:      #E8905A;
  --urge-wash:   #33200F;
  --on-urge:     #20252C;
  --mark-bg:     #22262B;
  --now:         #16241F;   /* a card, so it takes --ink: green, but not cream */
  --now-line:    #2E4A40;
  --now-line-2:  #22332C;
  --now-sunk:    #121C18;
  --warm:        #D8B87E;
  --good:        #4FA98A;
  --good-2:      #7FC9B0;
  --good-wash:   #1B332B;
  --on-good:     #0A241C;
  --shadow:      0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px -8px rgba(0, 0, 0, .6);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .6), 0 16px 34px -14px rgba(0, 0, 0, .9);
  --shell-bezel: #000000;
}