/* SuperOffice — THE PALETTE. One file, four surfaces.
 *
 * Load order everywhere: blue-whale.css (the kit's structure and vocabulary),
 * then this (the studio's own colours), then the surface's components.
 * Kept out of studio.css so the document builder can take the colours without
 * also taking that file's buttons, tables and type — it has 676 lines of its
 * own and the two component layers would fight.
 */

/* ---------------------------------------------------------------------------
 * THE PALETTE — RL's, in two modes.
 *
 * Sampled from rlinfraventure.com's own tokens: navy #0B1D32, gold #C5A55A,
 * cream #F6F4EF. Cream is mode 1, navy is mode 2. This overrides blue-whale.css
 * for the STUDIO ONLY — that file stays the shared source for the CRM and the
 * marketing site, which keep the blue.
 *
 * WHY GOLD RATHER THAN ANOTHER BLUE. Blue Whale derives its dark side by
 * darkening its own blues, so canvas, card, inset, rule AND accent are all
 * blue and the accent has nothing to be an accent AGAINST — the kit's own rule
 * ("blue only where it acts") is broken by its own dark mode. That is what the
 * near-black theme this replaces was working around. Gold is a different hue
 * from every surface it sits on in BOTH modes, so the rule survives instead.
 *
 * ONE BUTTON, BOTH MODES. Gold carries NAVY — never white, and never the
 * reverse on cream. Measured: gold text on cream is 2.15:1 and unreadable;
 * navy on gold is 7.20:1 either way. So --accent-ink is FIXED and the primary
 * button is the same object in light and dark. (The old theme reached the same
 * conclusion from the other end, making the label near-black because white on
 * #4c86e0 was 3.62:1.)
 *
 *   --color-accent       the FILL. Fixed, both modes.
 *   --color-accent-deep  the accent as TEXT, so it has to move: gold reads on
 *                        navy but not on cream, and light takes the dark gold.
 *
 * ONE block, not the selector-plus-media-query pair this replaces: light-dark()
 * already carries the switch, and the duplicate could not be kept in step.
 * ------------------------------------------------------------------------- */

:root {
  /* SURFACES ARE A LADDER, NOT A SET. The old three were within 1.00-1.15 of
     each other, so the rail, the panel, the toolbar and the footer all landed on
     one fill and the whole shell read as a single flat plane with hairlines
     drawn on it. Measured steps now: canvas -> raised 1.22 light / 1.21 dark,
     raised -> lifted 1.10 / 1.32.

     --canvas is RECESSED: it is the ground everything sits on, and on the
     builder it is the field the sheet sits in. That is why it went darker in
     light mode rather than lighter: white paper on an almost-white field was
     1.18:1 and dissolved into it. It is 1.38 now, and the sheet's shadow does
     the rest. */
  --color-canvas:        light-dark(#e2dbcb, #06121f);   /* recessed ground */
  --color-canvas-raised: light-dark(#f4f1ea, #0e2440);   /* rails, panels, cards */
  --color-canvas-lifted: light-dark(#fdfcfa, #17395d);   /* toolbars, menus, the things that float */
  /* kept: everything already written against --inset means "one step up from the
     ground", which is what --lifted is now. */
  --color-canvas-inset:  var(--color-canvas-lifted);
  /* text */
  --color-ink:       light-dark(#0b1d32, #f6f4ef);
  --color-ink-muted: light-dark(#2b3b4d, #c9d3de);
  --color-ink-dim:   light-dark(#55606c, #93a3b5);
  /* rules */
  --color-rule:        light-dark(#e3ddd0, #1b3a5c);
  --color-rule-strong: light-dark(#d2c8b4, #255a86);
  /* action */
  --color-accent:      #c5a55a;
  --color-accent-soft: #d4ba7a;
  /* RL's actual gold carries the text in dark mode. The pale #D4BA7A tint read
     as yellow rather than gold and matched nothing else in the brand; the real
     one is 6.62:1 on the panel and 5.00:1 on a lifted surface, so it never
     needed lightening in the first place. */
  --color-accent-deep: light-dark(#7f6624, #c5a55a);
  --color-accent-tint: light-dark(#f2ead8, #2a2312);
  --accent-ink:        #0b1d32;
  --accent-press:      light-dark(#b3934a, #d4ba7a);
  /* data semantics only, never decoration. RL's own green is 2.81:1 on cream,
     so light carries the same hue far enough to clear AA (4.90). Red is RL's
     --sold; dark keeps values picked for a navy ground. */
  --color-ok:        light-dark(#197a3f, #3dd07e);
  --color-ok-dot:    light-dark(#1fa855, #3dd07e);
  --color-ok-tint:   light-dark(#e6f2ea, #0d2e1e);
  --color-warn:      light-dark(#8a5a00, #e0ac54);
  --color-warn-tint: light-dark(#fbf2e0, #2e2208);
  --color-bad:       light-dark(#b23a48, #e8737f);
  --color-bad-dot:   light-dark(#c6444f, #e8737f);
  --color-bad-tint:  light-dark(#fbecee, #33141a);
  /* depth from light, and a gold ring so focus reads as the action colour */
  --rim:       light-dark(rgba(11, 29, 50, .12), rgba(197, 165, 90, .22));
  --lift:      light-dark(0 20px 50px rgba(11, 29, 50, .16), 0 20px 50px rgba(0, 0, 0, .55));
  /* the middle rung the shell was missing: enough to read as floating, not
     enough to read as a modal */
  --raise:     light-dark(0 4px 14px rgba(11, 29, 50, .10), 0 4px 14px rgba(0, 0, 0, .38));
  --specular:  light-dark(inset 0 1px 0 #fff, inset 0 1px 0 rgba(255, 255, 255, .05));
  --ring:      0 0 0 4px rgba(197, 165, 90, .34);
  --signal-glow: 0 8px 18px rgba(197, 165, 90, .35);
  --shadow:    light-dark(0 1px 2px rgba(11, 29, 50, .07), 0 1px 2px rgba(0, 0, 0, .5));
}

/* --scrim is bare channels for rgba(), so light-dark() cannot carry it. */
:root                { --scrim: 246, 244, 239; }
[data-theme="dark"]  { --scrim: 11, 29, 50; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --scrim: 11, 29, 50; }
}

/* blue-whale.css hands an engine without light-dark() ITS light palette, which
   is the wrong blue now. Same guard, this palette's light half. */
@supports not (color: light-dark(#fff, #000)) {
  :root {
    --color-canvas: #e2dbcb; --color-canvas-raised: #f4f1ea; --color-canvas-inset: #fdfcfa;
    --color-ink: #0b1d32; --color-ink-muted: #2b3b4d; --color-ink-dim: #55606c;
    --color-rule: #e3ddd0; --color-rule-strong: #d2c8b4;
    --color-accent-deep: #7f6624; --color-accent-tint: #f2ead8;
    --color-canvas-lifted: #fdfcfa;
    --accent-press: #b3934a;
    --color-ok: #197a3f;  --color-ok-dot: #1fa855;  --color-ok-tint: #e6f2ea;
    --color-warn: #8a5a00; --color-warn-tint: #fbf2e0;
    --color-bad: #b23a48; --color-bad-dot: #c6444f; --color-bad-tint: #fbecee;
    --rim: rgba(11, 29, 50, .12); --lift: 0 20px 50px rgba(11, 29, 50, .14);
    --specular: inset 0 1px 0 #fff; --shadow: 0 1px 2px rgba(11, 29, 50, .07);
  }
}