/* ============================================================
   CleverChameleon — design tokens

   NAMING LAW — TWO REGISTERS, NEVER MIXED (RULED 2026-09-15)
     LOGO   renders  clever.chameleon   all lowercase, one period, no space
     PROSE  writes   CleverChameleon    one word, CamelCase — as in this header
     products follow clever.<system> -> clever.crm / clever.hospitality / clever.bookings
     spoken          CleverCRM / CleverHospitality / CleverBookings
     "chameleon" is the PARENT'S OWN SYSTEM WORD — it fills the same slot in the pattern
     that "crm" fills for the CRM product, which is why the parent lockup is not a bare
     "clever". NONE of the sub-brand assets exist; this records the law and builds nothing.

   RULED LOCKUP, from the deployed cavelux.ai (web/cvl-visual-master.css 2259-2278):
     clever #E8EAED  ·  . #8B929E  ·  chameleon #33D6BB
     JetBrains Mono 700, letter-spacing -0.045em.
     On a LIGHT ground the clever span inverts to #101216; dot and teal never invert.
   NAMING CORRECTED 2026-09-14 (PASS 10): the brand is CleverChameleon, one word.
   The `clever.chameleon` form this header carried was invented in a PASS 9 dispatch and
   never ruled. Parent wordmark: "Clever" in --ink white, "Chameleon" in --teal #33D6BB.
   CleverChameleon is the PARENT BI platform; CRM / Hospitality / Bookings are sub-brands.
   Slugs, index keys and package paths are unchanged.
   Spectrum sampled from the pixel-chameleon reference, lifted in
   saturation for legibility on a near-black base.
   Base surfaces carry over from the existing CRM (black/charcoal).
   ============================================================ */

:root {
  /* ---- surfaces (unchanged from the current menu) ---- */
  --bg:        #0A0B0D;   /* app background — pure-ish black, matches logo plate */
  --panel:     #15181D;   /* cards, header */
  --panel-2:   #1B1F26;   /* inset controls, hovers */
  --panel-3:   #222731;   /* raised / selected rows */
  --line:      #262B33;   /* hairlines */
  --line-2:    #333A45;   /* stronger dividers */

  /* ---- type ---- */
  --txt:       #E8EAED;
  --txt-dim:   #8B929E;
  --txt-dim-2: #5F6673;
  --txt-invert:#0A0B0D;

  /* ---- the chameleon spectrum ----
     13 stops, evenly walked around the logo ring. Hue decreases
     clockwise from gold at 12 o'clock, same as the mark. ---- */
  --gold:      #FEC53D;   /* h44  — iris core, the brightest note */
  --amber:     #FFA02B;   /* h32 */
  --orange:    #FB6A20;   /* h18 */
  --vermilion: #F5451F;   /* h8  */
  --red:       #F0344E;   /* h352 */
  --rose:      #EE5C8E;   /* h338 */
  --magenta:   #D855D6;   /* h296 — outer scale ring */
  --violet:    #9B5CF0;   /* h268 */
  --indigo:    #5B63E8;   /* h236 */
  --blue:      #3E9BF0;   /* h208 */
  --cyan:      #2FC9DE;   /* h188 */
  --teal:      #33D6BB;   /* h168 — PRIMARY */
  --green:     #45CE72;   /* h142 */
  --lime:      #A9DE45;   /* h78 */

  /* ---- roles ---- */
  --primary:      var(--teal);
  --primary-ink:  #04211C;   /* text on a primary fill */
  --primary-soft: rgba(51, 214, 187, .14);
  --primary-edge: rgba(51, 214, 187, .45);

  --accent:       var(--gold);   /* secondary highlight, KPI numerals */
  --success:      var(--green);
  --warning:      var(--amber);
  --danger:       var(--red);
  --info:         var(--blue);

  /* ---- call outcome colours ----
     Cold to hot around the ring: obstacles cool, wins warm-bright.
     Nine stops, each distinct at a glance in a dense table. ---- */
  --o-noanswer:   #6B7280;   /* neutral slate — not a conversation */
  --o-voicemail:  var(--blue);
  --o-gatekeeper: var(--violet);
  --o-nopower:    var(--magenta);
  --o-dnc:        var(--red);
  --o-followup:   var(--amber);
  --o-moreinfo:   var(--lime);
  --o-meeting:    var(--green);
  --o-interested: var(--teal);

  /* ---- shape ---- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---- glow, borrowed from the mark ---- */
  --glow-primary: 0 0 14px rgba(51, 214, 187, .38);
  --glow-gold:    0 0 14px rgba(254, 197, 61, .34);

  /* ---- the ring, as a reusable gradient ---- */
  --ring-conic: conic-gradient(from 0deg,
    #FEC53D  0%,  #FB6A20 12%, #F0344E 24%, #D855D6 36%,
    #9B5CF0 46%, #5B63E8 56%, #3E9BF0 66%, #2FC9DE 74%,
    #33D6BB 82%, #45CE72 90%, #A9DE45 96%, #FEC53D 100%);
}

/* Reversed sweep — matches the logo exactly (hue decreases clockwise). */
.ring-sweep {
  background: conic-gradient(from 0deg,
    #FEC53D, #A9DE45, #45CE72, #33D6BB, #2FC9DE, #3E9BF0,
    #5B63E8, #9B5CF0, #D855D6, #EE5C8E, #F0344E, #FB6A20, #FEC53D);
}

/* ---- usage rules ----------------------------------------------------
   1. ONE accent per surface. Teal is the interactive colour: primary
      buttons, active nav, focus rings, links. Gold is reserved for the
      single number that matters on a screen (meetings booked).
   2. The spectrum is for CATEGORICAL data only — call outcomes, status
      chips, chart series. Never decorate chrome with it; the logo is
      the only place the full rainbow appears at once.
   3. Every spectrum colour clears 4.5:1 on --bg as text and 3:1 as a
      border. On a filled chip, use the colour at 14% alpha with the
      solid colour as text + 45% as border (see .tag in the app).
   4. Never put --gold text on --teal fill or vice versa. Fills always
      take --primary-ink or --txt.
--------------------------------------------------------------------- */