/* ===========================================================================
   THE TOKEN CONTRACT
   ---------------------------------------------------------------------------
   Every theme fills these in. Nothing in components.css reads anything else,
   so a theme that defines only this block is a complete theme.

   Three depth levels, and the level decides whether a surface is blurred:

     surface   panels, cards, tables, sidebar, header      no blur
     elevated  dropdowns, tooltips, fixed bottom toolbar    soft blur
     floating  modals, full-screen overlays                 real blur

   That is not decoration. In this CRM the sidebar is position:absolute and
   #wrapper is margin-pushed, so content never passes under the chrome and a
   backdrop-filter there would sample a flat colour: cost with no effect.
   Encoding the rule as levels means a component rule cannot get it wrong.

   The values below are fallbacks, so a theme missing a token degrades to
   something usable instead of breaking.
   =========================================================================== */

:root {
  /* --- how thick a border is, which is not the same question as what colour
         it is. A high-contrast theme needs 2px everywhere; a soft one needs a
         hairline. Found by writing the second theme, which is what that
         exercise is for. --- */
  --thm-border-width: 1px;

  /* --- level 1: surface (never blurred) --- */
  --thm-surface-fill:      #ffffff;
  --thm-surface-stroke:    rgba(17, 24, 39, .07);
  --thm-surface-highlight: rgba(255, 255, 255, .95);
  --thm-surface-shadow:    0 14px 34px -26px rgba(17, 24, 39, .75);
  --thm-surface-radius:    14px;

  /* --- level 2: elevated (soft blur) --- */
  --thm-elevated-fill:      #ffffff;
  --thm-elevated-stroke:    rgba(17, 24, 39, .10);
  --thm-elevated-highlight: rgba(255, 255, 255, .95);
  --thm-elevated-shadow:    0 18px 40px -22px rgba(17, 24, 39, .8);
  --thm-elevated-radius:    12px;
  --thm-elevated-blur:      0px;

  /* --- level 3: floating (real blur) --- */
  --thm-floating-fill:      #ffffff;
  --thm-floating-stroke:    rgba(17, 24, 39, .12);
  --thm-floating-highlight: rgba(255, 255, 255, .95);
  --thm-floating-shadow:    0 30px 70px -30px rgba(17, 24, 39, .85);
  --thm-floating-radius:    16px;
  --thm-floating-blur:      0px;

  /* --- the corner of a CONTROL: buttons, fields, sidebar links. Not the same
         question as the corner of the menu the control opens: Material 3 puts
         pill buttons next to 4px menus, Fluent 4px buttons inside 8px ones.
         Found by the seven-theme catalogue, the way --thm-border-width was
         found by the second theme. It defaults to the elevated radius because
         that is what controls read before the token existed, so no theme
         written earlier moves. --- */
  --thm-control-radius: var(--thm-elevated-radius);

  /* --- typography. Optional: core/typography.css, its only reader, is loaded
         only for a theme that declares at least one of these -- see that file
         for why. The defaults are the CRM's own, so a theme that sets just the
         heading font keeps Inter for body text. --- */
  --thm-font-body:        "Inter", sans-serif;
  --thm-font-heading:     var(--thm-font-body);
  --thm-heading-weight:   600;
  --thm-heading-tracking: normal;

  /* --- a quiet filled control that must stay VISIBLE against the surface:
         search fields, chips, column toggles. Not a state -- a hover fill can
         be lighter than the surface, which is right for a hover and wrong for
         a control that has to be seen at rest. --- */
  --thm-sunken-fill: rgba(17, 24, 39, .06);

  /* --- a text field. It is a WELL, not a raised surface, and it needs its own
         tokens: painting it with the elevated fill puts it the same distance
         from the card as the sunken fill does, only on the wrong side, and
         both land near 1.1:1 -- indistinguishable. The border does the real
         separating work, so it is stronger than a surface stroke, and the
         inset shadow sells the recess. --- */
  --thm-field-fill:   rgba(17, 24, 39, .05);
  --thm-field-stroke: rgba(17, 24, 39, .14);
  --thm-field-inset:  inset 0 1px 2px rgba(17, 24, 39, .05);

  /* --- text that sits ON the brand colour (buttons, badges). A theme with a
         pale brand needs dark text here, so it cannot be hardcoded. --- */
  --thm-on-brand: #ffffff;

  /* --- interaction states: every interactive component reads these,
         none invents its own --- */
  --thm-hover-fill:        rgba(17, 24, 39, .04);
  --thm-active-fill:       rgba(17, 24, 39, .08);
  --thm-focus-ring:        rgba(37, 99, 235, .35);
  --thm-disabled-opacity:  .45;

  /* --- the veil behind a modal. Perfex paints it neutral-700/70 at .9
         opacity, which is dark enough that a translucent card over it reads as
         flat mud instead of glass. A theme has to own this. --- */
  --thm-scrim: rgba(17, 24, 39, .32);

  /* --- the decorative layer the glass shows through; `none` turns it off --- */
  --thm-backdrop: none;

  /* --- the split login's brand panel. Its own token because a theme may want
         something quite different there from its page backdrop. --- */
  --thm-login-panel: linear-gradient(150deg, #4f46e5, #0ea5e9);

  /* --- the headline written on that panel. Not the text on a brand button:
         a dark palette's on-brand is dark (its brand is light), and on a
         panel darkened for the night it measured 1.2-2.3:1. Its own token,
         defaulting to on-brand so an older theme does not move. --- */
  --thm-login-panel-ink: var(--thm-on-brand);

  /* --- el sangrado del preset C. Va translucido: a plena opacidad un
         radial-gradient se lee como un circulo pegado, no como luz. --- */
  --thm-login-bleed:
    radial-gradient(760px 520px at 78% 20%, rgba(99, 102, 241, .38), transparent 62%),
    radial-gradient(680px 460px at 20% 82%, rgba(236, 72, 153, .28), transparent 62%);

  /* --- ambience --- */
  --thm-sat:    100%;
  --thm-motion: 200ms;
}