/* ============================================================================
   CORPORATE IDENTITY — every colour and every font the console draws with.

   admin.css and the views carry layout, state and structure; they name colours
   and type only through the tokens below. Nothing else in the tree states a
   colour or a font face, so this file is the whole identity.

   To run a second corporate identity:
     1. copy this file to public/ci-<brand>.css
     2. edit §1 — the brand hues, the neutral ramp and the two font stacks
     3. point `ci.stylesheet` at it — conf/common.conf, or NOCODE_CI_STYLESHEET
        per environment. It must stay a same-origin `/asset/….css` path; anything
        else is refused and falls back to this file (CorporateIdentity.scala).
   §2 and §3 usually stay as they are: they map the brand onto light/dark and
   onto the console's semantic roles. Change them only when a brand needs a
   different mapping (dark-only, a flatter type scale, squarer corners). The
   theme-toggle and .accent--* rules at the foot are part of the identity too.

   Keep §1 in the pair form it is written in: `--ci-x` for the solid colour and
   `--ci-x-rgb` for the same colour's channels, which is what the translucent
   tints in §2 are built from. A hue supplied only as a hex cannot be tinted.

   Default identity is the NoCode "Color Palette for Presentation":
     headline blue #005E93 · navy #002752 · sky #4DAADC
     green #617856 · sage #939C7D · sand #F2D998 · crimson #91283D
   ========================================================================== */

:root {

  /* =========================================================================
     §1 BRAND — what a new corporate identity edits
     ========================================================================= */

  /* brand hues */
  --ci-blue:           #005e93;   --ci-blue-rgb:           0 94 147;
  --ci-primary:        var(--ci-blue);           --ci-primary-rgb:  var(--ci-blue-rgb);
  --ci-link:           var(--ci-primary);
  --ci-secondary:      var(--ci-blue);           --ci-secondary-rgb: var(--ci-blue-rgb);
  --ci-navy:           #002752;   --ci-navy-rgb:           0 39 82;
  --ci-sky:            #4daadc;   --ci-sky-rgb:            77 170 220;
  --ci-green:          #617856;   --ci-green-rgb:          97 120 86;
  --ci-phosphor:       #8ab17d;   --ci-phosphor-rgb:       138 177 125;
  --ci-sage:           #939c7d;   --ci-sage-rgb:           147 156 125;
  --ci-sand:           #f2d998;   --ci-sand-rgb:           242 217 152;
  --ci-crimson:        #91283d;   --ci-crimson-rgb:        145 40 61;
  --ci-crimson-bright: #c5455f;   --ci-crimson-bright-rgb: 197 69 95;
  --ci-mint:           #8fce9b;   /* illustration accent only — no semantic role */

  /* Light-theme counterparts. The brand hues are tuned to read on the dark
     terminal ground; on paper they are too pale to hold contrast, so each one
     that carries text has a darkened twin. A monochrome or light-first brand
     can point these at the same value as the hue above. */
  --ci-green-deep:   #4a5c41;   /* green   → borders, muted accent */
  --ci-green-ink:    #356b2f;   /* green   → primary accent, text  */
  --ci-sage-ink:     #5c6b52;   /* sage    → labels                */
  --ci-sand-ink:     #8a6a12;   /* sand    → warnings              */
  --ci-crimson-ink:  #a12138;   /* crimson → danger                */

  /* neutral ramp — the ground the hues sit on */
  --ci-white:         #ffffff;   --ci-white-rgb: 255 255 255;
  --ci-paper:         #eef2f7;   /* light app background       */
  --ci-paper-raised:  #e5ecf3;   /* light wells / panel bodies */
  --ci-paper-chrome:  #dbe6f1;   /* light bars & heads         */
  --ci-ink-strong:    #16242f;   /* light primary text         */
  --ci-ink-muted:     #55697d;   /* light muted text           */
  --ci-ink-active:    #0b2a44;   /* light text on an active row */
  --ci-night:         #04101f;   /* dark app background        */
  --ci-night-raised:  #071a30;   /* dark raised surface        */
  --ci-mist:          #cfe3f2;   /* dark primary text          */
  --ci-mist-dim:      #7f96ab;   --ci-mist-dim-rgb: 127 150 171;
  --ci-shadow-rgb:    0 0 0;
  --ci-scrim-day-rgb:   40 55 70;  /* modal backdrop, light */
  --ci-scrim-night-rgb: 2 8 16;    /* modal backdrop, dark  */

  /* ink that sits on top of a solid brand fill */
  --ci-on-phosphor-day:   #eef7ea;
  --ci-on-phosphor-night: #04130b;
  --ci-on-crimson-soft:   #ffd9e0;

  /* type stacks — the console is a terminal, so the mono face is the primary
     one; --sans is used by the portal (login / services) only */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* =========================================================================
     §2 SEMANTIC COLOUR — what the console spends

     Default is Auto: light-dark() resolves against the OS preference. The theme
     toggle stamps data-theme on <html> to force a choice (see the end of this
     file). Every token is <light>, so the whole console
     flips from this one place.
     ========================================================================= */

  color-scheme: light;

  --navy-900: var(--ci-paper);           /* app background base   */
  --navy-850: var(--ci-white);    /* cards / dialogs       */
  --navy-800: var(--ci-paper-chrome);     /* brand navy — chrome   */
  --blue-700: var(--ci-blue);                     /* reads on both themes                      */
  --sky-400:  var(--ci-blue);              /* links, focus, accents */
  --green-600:var(--ci-green-deep);      /* borders, muted accent */
  --green-400:var(--ci-green-ink);    /* "phosphor" / primary  */
  --sage-400: var(--ci-sage-ink);         /* secondary text        */
  --sand-300: var(--ci-sand-ink);         /* warnings              */
  --crimson:  var(--ci-crimson-ink);   /* danger / logout       */
  --crimson-bright: var(--ci-crimson-bright);

  --ink:      var(--ci-ink-strong);       /* primary text          */
  --ink-dim:  var(--ci-ink-muted);    /* muted text            */
  --ink-faint: rgb(var(--ci-mist-dim-rgb) / 0.55);                    /* placeholder text      */
  --line:     rgb(var(--ci-primary-rgb) / 0.16);  /* hairline */
  --line-blue:rgb(var(--ci-primary-rgb) / 0.32);

  /* surfaces */
  --surface-deep:   var(--ci-paper-raised);      /* wells / panel bodies */
  --surface-chrome: var(--ci-paper-chrome);       /* bars, table heads    */
  --surface-inset:  var(--ci-white);  /* input well     */
  --hover-sky:      rgb(var(--ci-blue-rgb) / 0.08);
  --active-bg:      rgb(var(--ci-blue-rgb) / 0.14);
  --active-text:    var(--ci-ink-active);
  --overlay:        rgb(var(--ci-scrim-day-rgb) / 0.40);
  --scanline:       rgb(var(--ci-shadow-rgb) / 0.045);
  --glow-1:         rgb(var(--ci-blue-rgb) / 0.10);
  --glow-2:         rgb(var(--ci-green-rgb) / 0.10);
  --btn-ink:        var(--ci-on-phosphor-day);

  /* accents on the primary (phosphor) control */
  --btn-line:    rgb(var(--ci-phosphor-rgb) / 0.6);
  --btn-glow:    rgb(var(--ci-phosphor-rgb) / 0.7);
  --cursor-glow: rgb(var(--ci-phosphor-rgb) / 0.8);

  /* status hairlines — a badge borrows its hue at low alpha */
  --ok-line:   rgb(var(--ci-phosphor-rgb) / 0.5);
  --warn-line: rgb(var(--ci-sand-rgb) / 0.45);

  /* danger — logout, delete, destructive confirm */
  --danger-ink:  var(--ci-on-crimson-soft);   /* label on the resting, translucent fill */
  --danger-on:   var(--ci-white);             /* label on the solid crimson fill        */
  --danger-bg:   rgb(var(--ci-crimson-rgb) / 0.20);
  --danger-line: rgb(var(--ci-crimson-bright-rgb) / 0.55);
  --danger-glow: rgb(var(--ci-crimson-bright-rgb) / 0.75);

  /* elevation & focus — colour only; the offsets stay with the rule in admin.css */
  --focus-ring:   rgb(var(--ci-sky-rgb) / 0.18);
  --shadow-drop:  rgb(var(--ci-shadow-rgb) / 0.85);
  --shadow-modal: rgb(var(--ci-shadow-rgb) / 0.8);
  --shadow-edge:  rgb(var(--ci-shadow-rgb) / 0.4);
  --edge-light:   rgb(var(--ci-white-rgb) / 0.04);   /* inner top highlight */

  /* =========================================================================
     §3 WEIGHT, TRACKING & SHAPE
     The font-size ladder is deliberately absent: it is one global scale, stated
     in admin.css §0, so every identity renders the console at the same size and
     a new brand cannot ship a half-complete scale. This sheet still owns how the
     type *looks* — the face (§1), its weights, its tracking, its line-heights.
     ========================================================================= */

  --fw-medium: 600;
  --fw-bold:   700;
  --fw-black:  800;

  --track-tight: -0.01em;   /* portal headline */
  --track-1: 0.02em;
  --track-2: 0.03em;
  --track-3: 0.04em;
  --track-4: 0.06em;
  --track-5: 0.08em;
  --track-6: 0.1em;
  --track-7: 0.12em;
  --track-8: 0.16em;
  --track-9: 0.18em;
  --track-grip: 2px;   /* the drag-grip glyph, spaced in px because it is an icon, not text */

  --lh-tight:   1.2;
  --lh-base:    1.5;
  --lh-relaxed: 1.6;
  --lh-loose:   1.85;

  --r-xs:   4px;
  --r-sm:   6px;
  --r:      8px;
  --r-lg:   12px;
  --r-pill: 999px;
}


/* Accent shapes inside the portal illustrations (login, services, access-denied). These take the
   raw brand hue rather than a semantic token: each sits behind a currentColor outline at low
   opacity and is meant to read the same on either theme. They are rules rather than tokens
   because the shape is in the markup — an identity that drops or recolours an accent edits here,
   not in admin.css. */
.accent--sky    { fill: var(--ci-sky); }
.accent--sand   { fill: var(--ci-sand); }
.accent--mint   { fill: var(--ci-mint); }
.accent--danger { fill: var(--ci-crimson-bright); }