/* ==========================================================================
   ADIMATE — colour tokens, the NEW scheme
   Source of truth: Figma "🚧 STYLE GUIDE" (283:14692), read from the file's own
   variables rather than transcribed from a screenshot.

   THIS FILE REPLACES NOTHING YET, and that is deliberate. core/tokens.css is
   the live one - 44 tokens the app is built on. This sits beside it and is
   loaded ONLY by the style guide until each part of the app is moved across on
   purpose, one at a time. A sweeping rename would be one enormous change nobody
   could review, and the first thing to break would be something nobody looked
   at for a week.

   THE COLLISION IS GONE. This used to say the two sheets must never be linked
   together, because several names appeared in both with different values. They
   were checked one by one: six names appear in both, three already carried the
   SAME value, and --tm-frame turned out to be a dead alias in the old sheet
   that nothing in the repo used - it has been removed there. That left exactly
   two real differences, --ui-bg and --ui-main, and the application has taken
   the new values, so the two sheets now agree.

   Loading both is therefore safe. Moving the app across still happens one part
   at a time, for the reason above: a sweeping rename would be one enormous
   change nobody could review.

   Five families, and the prefix says which:
     UI  surfaces the interface is built from
     BX  boxes: fields, buttons and their strokes
     HL  highlight: blue, and the greys that live with it
     TX  text
     TM  the timeline's own greys, which need finer steps than the rest

   Names are the design's, lower-cased and hyphenated: "UI/MAIN LIGHT" becomes
   --ui-main-light. Mechanical on purpose - anybody can go from a Figma variable
   to a CSS token without a lookup table.
   ========================================================================== */
:root {
  /* ---- UI: interface surfaces ------------------------------------------- */
  --ui-main:          #333333;   /* panel body, the default surface           */
  --ui-main-light:    #393939;   /* a plate raised off the panel              */
  --ui-main-dark:     #2f2f2f;   /* a panel recessed into another             */
  --ui-bg:            #222222;   /* the page and the well behind the panels   */
  --ui-black:         #111111;
  --ui-white:         #ffffff;

  /* ---- BX: option boxes -------------------------------------------------- */
  --bx-disabled:      #252525;   /* a control that cannot be used             */
  --bx-enabled:       #151515;   /* a field well - darkest, type sits in it   */
  --bx-stroke:        #393939;   /* the 1px edge round a control              */
  --bx-stroke-light:  #444444;   /* the same edge on a lighter plate          */
  --bx-stroke-hover:  #555555;   /* and under the pointer                     */

  /* ---- HL: highlight ----------------------------------------------------- */
  --hl-blue:          #3790f0;   /* selection, focus, anything active         */
  --hl-blue-light:    #64aefe;   /* inner stroke on a blue fill               */
  --hl-blue-dark:     #285f9c;   /* blue that is present but not the subject  */
  --hl-arrow:         #696969;   /* navigation chevrons and carets            */
  --hl-icon:          #909090;   /* icons                                     */

  /* ---- TX: text ---------------------------------------------------------- */
  --tx-standard:      #999999;   /* body text                                 */
  --tx-dark:          #777777;   /* disabled, and captions under a label      */
  --tx-light:         #eeeeee;   /* text that has to carry                    */
  --tx-black:         #121212;   /* type ON a light or blue fill              */

  /* ---- TM: timeline ------------------------------------------------------ */
  --tm-frame:         #909090;   /* a frame the layer occupies and draws in   */
  --tm-empty:         #5a5a5a;   /* a frame that exists and draws nothing     */
  --tm-dark:          #323232;
  --tm-highlight:     #3a3a3a;   /* every fifth frame                         */
  --tm-darklight:     #2f2f2f;
  --tm-grey:          #909090;   /* captions and column heads                 */
  --tm-tween:         #7c5da2;   /* a tween you built by hand                 */

  /* ---- type -------------------------------------------------------------- */
  /* Both faces the file defines. A colour scheme that does not carry its type
     is half a scheme, and the style guide needs both to look like the design
     at all. TEWEEN is spelled that way in Figma; corrected here, because a
     token name is code and a typo in it outlives the person who made it. */
  --ui-tab:  600 10px/10px 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --ui-menu: 400 12px/1 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
}