/* ── CallCrew console — the palette ──────────────────────────────────────────
 *
 * THIRTY-TWO COLOURS. This file is the only place a colour may be written
 * down, and the list does not grow without a person saying so — see
 * src/lib/console/palette.test.ts, which fails the build on a hex written
 * anywhere else, and the rule in design.md.
 *
 * Arranged the way it is used:
 *
 *   5   neutrals     nearly everything — surfaces, text, lines
 *   24  the family   8 hues × tint / solid / ink, for labels AND states
 *   3   borrowed     other companies' colours, right as they are
 *
 * The family is not a set of crayons: every hue was generated at one
 * lightness and one chroma around the wheel, anchored on the three the
 * console already had (rose was the error red, orange the brand, green the
 * success green), so they read as siblings. Every ink clears 4.5:1 on its own
 * tint and on white, so a label is readable wherever it lands.
 *
 * The console is light-only; there is no dark block on purpose.
 */

:root {
  /* ══ Neutrals ═══════════════════════════════════════════════════════════
   * Five, and each does a job no other can. There were seventeen: six
   * surfaces within ΔE 6 of white, four line greys, seven text greys. */
  --cc-white: #FFFFFF;   /* cards, menus, anything holding content */
  --cc-ground: #F8F6F4;  /* the page itself, and an inset inside a card */
  --cc-line: #E5E0DA;    /* every border and divider — AND every hover fill */
  --cc-muted: #6B635C;   /* secondary text: captions, timestamps, empty states */
  --cc-ink: #212832;     /* everything primary: headings, names, the chosen pill */

  /* ══ The family ═════════════════════════════════════════════════════════
   * Eight hues, three shades each:
   *   tint    a ground to sit a label or a notice on
   *   solid   a dot, a bar, a filled button
   *   ink     the words on the tint, and the line around it
   *
   * Three of them mean something fixed (see states, below). The other five
   * tell things apart with no judgement attached: an agent's action in the
   * log, a department, a service area. A service area takes the next unused
   * hue STARTING AT ORANGE, so an org's first area is brand coloured. */

  /* ── ORANGE IS THE BRAND ───────────────────────────────────────────────
   * CallCrew's own colour, and the only one that may fill a primary button.
   * It doubles as the "attention" state. One orange thing per screen; a
   * second makes both of them ordinary. Pressed is --cc-orange-ink. */
  --cc-orange: #FCF1E9;
  --cc-orange-solid: #E9821F;
  --cc-orange-ink: #B45309;

  --cc-rose: #FEF0EE;
  --cc-rose-solid: #E56A60;
  --cc-rose-ink: #B02525;

  --cc-yellow: #F6F4E8;
  --cc-yellow-solid: #E5CC1C;
  --cc-yellow-ink: #786200;   /* dark on purpose: a yellow nobody can read is decoration */

  --cc-green: #ECF7EE;
  --cc-green-solid: #1FB259;  /* also a switch that is on, and a live dot */
  --cc-green-ink: #187741;

  --cc-teal: #E8F7F7;
  --cc-teal-solid: #00AFB3;
  --cc-teal-ink: #007A7E;

  --cc-indigo: #EEF4FF;
  --cc-indigo-solid: #588EF6;
  --cc-indigo-ink: #325FB6;

  --cc-violet: #F6F1FC;
  --cc-violet-solid: #AD77E5;
  --cc-violet-ink: #7748A5;

  --cc-magenta: #FCEFF6;
  --cc-magenta-solid: #DB67AE;
  --cc-magenta-ink: #9A3976;

  /* ══ Borrowed ═══════════════════════════════════════════════════════════
   * Other companies' colours. Right as they are, wrong if we tidy them —
   * WhatsApp's green is WhatsApp's. Its bubble TEXT is our own ink, because
   * that is just text. */
  --cc-wa-green: #1FA855;   /* WhatsApp, wherever we draw it */
  --cc-wa-bubble: #D9FDD3;  /* its outgoing bubble */
  --cc-sms-blue: #0A6CDB;   /* SMS, in iMessage's blue */

  /* ══ States ═════════════════════════════════════════════════════════════
   * Not colours of their own — three of the family, named for what they
   * mean, so a notice and a chip are visibly the same system. */
  --cc-live: var(--cc-green-ink);        /* connected, on, handled */
  --cc-live-bg: var(--cc-green);
  --cc-live-dot: var(--cc-green-solid);
  --cc-warn: var(--cc-orange-ink);       /* something needs a person */
  --cc-warn-bg: var(--cc-orange);
  --cc-warn-dot: var(--cc-orange-solid);
  --cc-bad: var(--cc-rose-ink);          /* it failed, or it will */
  --cc-bad-bg: var(--cc-rose);
  --cc-bad-dot: var(--cc-rose-solid);

  /* ══ Everything that isn't a colour ═════════════════════════════════════ */

  /* One shadow. There were 49 spellings, five of which differed by a few
   * pixels of blur — invisible at the size things actually float. The orange
   * glow went with them: the button's own colour was already saying it. */
  --cc-shadow: 0 12px 34px rgba(33, 40, 50, 0.14);

  /* Glass, for things that float OVER the page: the nav, the header's corner
   * clusters. Content cards stay opaque. */
  --cc-glass-bg: rgba(255, 255, 255, 0.74);
  --cc-glass-line: rgba(255, 255, 255, 0.85);
  --cc-glass-blur: blur(18px) saturate(160%);

  /* ── Type ────────────────────────────────────────────────────────────── */
  --cc-font: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
  --cc-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --cc-t-page: 20px;       /* a page's own heading */
  --cc-t-title: 17px;      /* a card's name, a person's name */
  --cc-t-subtitle: 15px;
  --cc-t-ui: 14px;         /* nav tabs, primary buttons, message text */
  --cc-t-control: 13.5px;
  --cc-t-menu: 13px;       /* menu rows, pickers, inputs */
  --cc-t-small: 12.5px;    /* the workhorse: chips, captions, notices */
  --cc-t-label: 11.5px;
  --cc-track-title: -0.02em;
  --cc-track-label: 0.06em;

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --cc-r-pill: 999px;      /* pressable, or a state */
  --cc-r-card: 18px;
  --cc-r-notice: 16px;
  --cc-r-menu: 14px;
  --cc-r-row: 12px;
  --cc-r-field: 10px;
  --cc-r-button: 9px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --cc-hover-in: 120ms ease;
  --cc-fade-in: 180ms ease;
  --cc-fold: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}