/* ===========================================================================
   Orchesta — the brand, defined once.

   There were two palettes for one product. The website was violet and
   carried the logo; the application was teal, because it was built when the
   product was called something else. Nobody looking at both would have
   guessed they were the same company, and any change meant editing two
   files that had already drifted.

   This is the only file that states a colour. The application aliases these
   tokens, the founder's console reads them directly, and the website's own
   names map onto them. A palette is not a decorative choice — it is the
   thing that makes a customer's admin screen and the page that sold it to
   them recognisably one product.

   Served from wwwroot rather than bundled, so the console — a standalone
   page with no build step — reads the same bytes as the application.
   =========================================================================== */

:root {
  --ground:    #f5f6fa;   /* the page behind everything          */
  --surface:   #ffffff;   /* cards, tables, anything raised      */
  --sunk:      #f9fafd;   /* headers, hovers, anything recessed  */

  --line:      #e4e8f0;   /* a border you are meant to see       */
  --line-soft: #eff2f7;   /* a border that only separates        */
  --line-strong:#c8cfdd;  /* a border under focus                */

  --ink:       #0d1830;   /* what you read                       */
  --ink2:      #414d68;   /* what you read second                */
  --ink3:      #647089;   /* labels, captions                    */
  --ink4:      #939db3;   /* present but not competing           */

  /* One accent, and it is the brand's. Everything the product wants you to
     click or notice. 5.5:1 on white, so it carries text as well as fill. */
  --accent:      #5d4df1;
  --accent-hover:#4a39d6;
  --accent-soft: #eeecfe;
  --accent-line: #d3ccfb;
  --on-accent:   #ffffff;  /* text laid on the accent itself     */

  /* State, kept apart from the accent so "important" and "wrong" differ.
     Green is the brand's green, darkened enough to read as text. */
  --ok:        #14996f;  --ok-soft:     #e6f7f1;
  --warn:      #a8621b;  --warn-soft:   #fdf1e3;
  --danger:    #a8342a;  --danger-soft: #fbeceb;
  --link:      #0a5fd0;

  /* Inbound and outbound mail: two hues that are neither accent nor state,
     drawn from the brand's blue and green rather than invented. */
  --in:  #0a63bd;  --in-soft:  #eaf3fd;  --in-line:  #d4e6f9;
  --out: #14996f;  --out-soft: #e6f7f1;  --out-line: #cdeee1;

  /* Shape, on a scale rather than per-rule. */
  --r-xs: 3px;   /* a tag around a word            */
  --r-sm: 5px;   /* inputs, buttons, small chips   */
  --r-md: 7px;   /* grouped controls, panels       */
  --r-lg: 10px;  /* cards and anything that floats */
  --r-pill: 999px;
  --radius: var(--r-sm);
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --shadow: 0 1px 2px rgba(13, 24, 48, 0.05), 0 8px 24px rgba(13, 24, 48, 0.07);

  /* The band across the top, and the ink that sits on it. Its own tokens
     rather than the page's, because it is the one surface in this product
     that is dark in both themes — reusing the page's ink there is how a
     header ends up with grey-on-grey text the moment somebody switches. */
  --band:        #10182b;
  --band-line:   #222b42;
  --band-ink:    #f4f6fb;
  --band-ink2:   #b4bdd1;
  --band-ink3:   #8a93a9;
  --band-accent: #b5abfb;
}

/* Dark, said once as a list of tokens and applied twice: for the system
   setting (which most people never override) and for an explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ground:#0c0f18; --surface:#151926; --sunk:#11141f;
    --line:#262c3c; --line-soft:#1e2332; --line-strong:#3a4255;
    --ink:#e9ecf5; --ink2:#b2bacd; --ink3:#828ba2; --ink4:#636c83;
    --accent:#8f83f7; --accent-hover:#a59bf9; --accent-soft:#1c1a3c;
    --accent-line:#332c68; --on-accent:#0c0f18;
    --ok:#3ec394; --ok-soft:#0f2a22;
    --warn:#d19a5c; --warn-soft:#2a2015;
    --danger:#e08a7e; --danger-soft:#31201d;
    --link:#79aef0;
    --in:#6fa6e4; --in-soft:#141f2e; --in-line:#213449;
    --out:#3ec394; --out-soft:#0f2a22; --out-line:#1c4436;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    /* The band is dark in both themes, so in dark mode it has to lift off
       the page rather than blend into it. */
    --band:      #080b14; --band-line: #1b2133;
    --band-ink:  #e9ecf5; --band-ink2: #a5aec4; --band-ink3: #78819a;
    --band-accent: #8f83f7;
  }
}
:root[data-theme='dark'] {
  --ground:#0c0f18; --surface:#151926; --sunk:#11141f;
  --line:#262c3c; --line-soft:#1e2332; --line-strong:#3a4255;
  --ink:#e9ecf5; --ink2:#b2bacd; --ink3:#828ba2; --ink4:#636c83;
  --accent:#8f83f7; --accent-hover:#a59bf9; --accent-soft:#1c1a3c;
  --accent-line:#332c68; --on-accent:#0c0f18;
  --ok:#3ec394; --ok-soft:#0f2a22;
  --warn:#d19a5c; --warn-soft:#2a2015;
  --danger:#e08a7e; --danger-soft:#31201d;
  --link:#79aef0;
  --in:#6fa6e4; --in-soft:#141f2e; --in-line:#213449;
  --out:#3ec394; --out-soft:#0f2a22; --out-line:#1c4436;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  --band:      #080b14; --band-line: #1b2133;
  --band-ink:  #e9ecf5; --band-ink2: #a5aec4; --band-ink3: #78819a;
  --band-accent: #8f83f7;
}