/*
 * tugger-motion theme: design tokens.
 *
 * Loaded on every page (public and portal). Holds custom properties only, so loading it changes nothing
 * on its own; the chrome and public stylesheets use these.
 *
 * Rules:
 * - Raw colour values appear ONLY in the palette block. Everything else uses the role tokens.
 * - Role tokens are named by what they do (surface, text, accent), never by the colour they hold, so a
 *   palette change or a future dark mode is a change to values here, not to components.
 * - Dark mode, if it ever happens (public pages only), is a second set of role values under
 *   :root[data-theme="dark"]. Not built yet.
 *
 * Source: Artwork/Rebrand-2026/tugger-homepage-light-v1-motion.html. Its own variable names are tied to
 * colours (e.g. --white holds navy) and are deliberately not carried over.
 */

:root {
    /* Palette */
    --tm-navy-900: #01293C;
    --tm-slate-700: #2E4A63;
    --tm-slate-500: #5C7690;
    --tm-blue-500: #35A8E0;
    --tm-blue-700: #1D7EB1;
    --tm-blue-500-glow: rgba(53, 168, 224, 0.28);
    --tm-blue-100: #CFEEFF;
    --tm-blue-300: #8FD3F5;
    --tm-blue-400: #4FA9DC;
    --tm-blue-600: #1F8AC2;
    --tm-blue-500-a10: rgba(53, 168, 224, 0.10);
    --tm-blue-500-a12: rgba(53, 168, 224, 0.12);
    --tm-sky-100: #DCEEF9;
    --tm-mist-25: #F7FAFC;
    --tm-orange-500-a12: rgba(244, 118, 34, 0.12);
    --tm-orange-500-a34: rgba(244, 118, 34, 0.34);
    --tm-navy-900-a04: rgba(1, 41, 60, 0.04);
    --tm-white-55: rgba(255, 255, 255, 0.55);
    --tm-transparent: rgba(255, 255, 255, 0);
    --tm-orange-500: #F47622;
    --tm-orange-700: #D9600F;
    --tm-orange-500-glow: rgba(244, 118, 34, 0.30);
    --tm-orange-400: #FF8A3D;
    --tm-orange-600: #E9660D;
    --tm-white: #FFFFFF;
    --tm-white-88: rgba(255, 255, 255, 0.88);
    --tm-white-97: rgba(255, 255, 255, 0.97);
    --tm-white-45: rgba(255, 255, 255, 0.45);
    --tm-mist-50: #F3F7FA;
    --tm-mist-100: #EAF3FA;
    --tm-mist-200: #D5E3EE;
    --tm-charcoal: #3C3C3B;
    --tm-steel-a18: rgba(30, 80, 128, 0.18);
    --tm-blue-500-a11: rgba(53, 168, 224, 0.11);
    --tm-blue-500-a22: rgba(53, 168, 224, 0.22);
    --tm-navy-900-a12: rgba(1, 41, 60, 0.12);
    --tm-blue-800: #1B6A99;
    --tm-blue-500-a85: rgba(53, 168, 224, 0.85);
    --tm-mist-30: #F6F9FC;
    --tm-orange-500-a55: rgba(244, 118, 34, 0.55);
    --tm-black: #000000;
    --tm-orange-800: #C9540A;
    --tm-orange-300: #F89B62;
    --tm-orange-200: #FFC79B;
    --tm-orange-50: #FFEEDF;
    --tm-orange-500-a11: rgba(244, 118, 34, 0.11);
    --tm-orange-500-a75: rgba(244, 118, 34, 0.75);
    --tm-mist-150: #E3EDF5;
    --tm-mist-75: #EEF5FA;
    --tm-blue-450: #4DB4E6;
    --tm-blue-550: #2A97CF;
    --tm-blue-500-a14: rgba(53, 168, 224, 0.14);
    --tm-blue-500-a35: rgba(53, 168, 224, 0.35);
    --tm-blue-500-a50: rgba(53, 168, 224, 0.50);
    /* pricing plan cards: a colour per card (orange, blue, steel, gold), each with a deep shade, the colour,
       a hot near-white centre, the lit border, a faint wash, the resting border tint and a dim all-round glow */
    --tm-orange-100: #FFE7D2;
    --tm-orange-500-a13: rgba(244, 118, 34, 0.13);
    --tm-orange-500-a42: rgba(244, 118, 34, 0.42);
    --tm-azure-700: #1E6FD9;
    --tm-blue-500-a13: rgba(53, 168, 224, 0.13);
    --tm-blue-500-a32: rgba(53, 168, 224, 0.32);
    --tm-blue-500-a40: rgba(53, 168, 224, 0.40);
    --tm-blue-500-a55: rgba(53, 168, 224, 0.55);
    --tm-blue-500-a18: rgba(53, 168, 224, 0.18);
    --tm-blue-500-a25: rgba(53, 168, 224, 0.25);
    --tm-blue-500-a45: rgba(53, 168, 224, 0.45);
    --tm-orange-500-a20: rgba(244, 118, 34, 0.20);
    --tm-steel-800: #14446E;
    --tm-steel-700: #1E5080;
    --tm-steel-600: #1E5A8E;
    --tm-steel-300: #7FA9D0;
    --tm-steel-a06: rgba(30, 80, 128, 0.06);
    --tm-steel-a14: rgba(30, 80, 128, 0.14);
    --tm-steel-a20: rgba(30, 80, 128, 0.20);
    --tm-steel-a30: rgba(30, 80, 128, 0.30);
    --tm-steel-a38: rgba(30, 80, 128, 0.38);
    --tm-gold-700: #C99A12;
    --tm-gold-500: #EFC23A;
    --tm-gold-400: #FFD54A;
    --tm-gold-100: #FFF6D0;
    --tm-gold-400-a16: rgba(255, 213, 74, 0.16);
    --tm-gold-400-a28: rgba(255, 213, 74, 0.28);
    --tm-gold-500-a55: rgba(239, 194, 58, 0.55);
    /* webinar banner: white glows on the blue band, and the button's shadow */
    --tm-white-90: rgba(255, 255, 255, 0.90);
    --tm-white-60: rgba(255, 255, 255, 0.60);
    --tm-charcoal-a18: rgba(59, 59, 58, 0.18);
    /* Our Platform pages: the dark slate frame and its glows, the pale return arrow, the info callout */
    --tm-slate-600: #3E5C74;
    --tm-navy-900-a10: rgba(1, 41, 60, 0.10);
    --tm-navy-900-a24: rgba(1, 41, 60, 0.24);
    --tm-mist-300: #C9D6E2;
    --tm-sky-50: #EEF7FD;
    --tm-blue-500-a38: rgba(53, 168, 224, 0.38);
    /* How it Works: the illustrative dashboard's bars and frame */
    --tm-blue-150: #BFE2F5;
    --tm-steel-200: #A9C2D6;
    /* forms (Sign In): an invalid field, its message and the error alert; placeholder text; the Xero button's hover */
    --tm-red-600: #D14343;
    --tm-red-700: #C13030;
    --tm-red-800: #9E2A2A;
    --tm-red-600-a06: rgba(209, 67, 67, 0.06);
    --tm-red-600-a14: rgba(209, 67, 67, 0.14);
    --tm-red-600-a38: rgba(209, 67, 67, 0.38);
    --tm-mist-400: #9DB2C6;
    --tm-xero-blue: #13B5EA;
    --tm-xero-blue-a14: rgba(19, 181, 234, 0.14);
    /* Performance and Reliability: the refresh ring's idle and past hours, the storage bars' outline, the P1 row */
    --tm-mist-175: #DCE8F2;
    --tm-blue-200: #9ED3EF;
    --tm-orange-500-a05: rgba(244, 118, 34, 0.05);
    /* Brand page (#2583): the guidelines' background and chart colours, which the site itself doesn't use */
    --tm-sky-150: #E2F3FB;
    --tm-grey-100: #EFEFEF;
    --tm-ocean-800: #005177;
    /* guide page (#2582): the download card's dark grey moving ring */
    --tm-graphite-900: #2A2A29;
    --tm-graphite-700: #5C5C5A;
    --tm-graphite-400: #9A9A98;
    --tm-graphite-200: #D6D6D4;

    /* Surfaces */
    --tm-surface: var(--tm-mist-50);
    --tm-surface-page: var(--tm-mist-25);
    --tm-surface-page-glow: var(--tm-sky-100);
    --tm-surface-sunken: var(--tm-navy-900-a04);
    --tm-surface-raised: var(--tm-white);
    --tm-surface-elevated: var(--tm-mist-100);
    --tm-surface-inverse: var(--tm-navy-900);
    --tm-border: var(--tm-mist-200);
    --tm-divider: var(--tm-steel-a18);
    --tm-surface-header: var(--tm-white-88);
    --tm-surface-menu: var(--tm-white-97);
    --tm-menu-border: var(--tm-blue-500-a22);
    --tm-menu-hover: var(--tm-blue-500-a11);
    --tm-shadow: var(--tm-navy-900-a12);
    /* content cards (question, way, reason): a white-to-mist wash, a hairline shadow */
    --tm-card-wash: var(--tm-mist-30);
    --tm-card-shadow: var(--tm-surface-sunken);
    /* opaque stop of a fade-out mask (only the alpha of a mask colour matters) */
    --tm-mask-solid: var(--tm-black);
    /* a featured block (the pricing box): accent frame and glow */
    --tm-feature-glow: var(--tm-blue-500-a22);
    /* a block framed in dark slate (the certificate card, the settings panel in an orange-led section): frame,
       tight ring and wide glow */
    --tm-frame-strong: var(--tm-slate-600);
    --tm-frame-strong-ring: var(--tm-navy-900-a10);
    --tm-frame-strong-glow: var(--tm-navy-900-a24);
    /* a muted line in a diagram (the crossed-out return arrow on Security and Compliance) */
    --tm-line-muted: var(--tm-mist-300);
    /* an information callout: its wash and outline */
    --tm-callout-wash: var(--tm-sky-50);
    --tm-callout-border: var(--tm-blue-500-a38);
    /* the Brand page: each colour swatch shows one brand colour, so it holds exactly that colour (guidelines v1.1);
       the dark and grey logo tiles; the trade mark box's wash */
    --tm-brand-swatch-blue: var(--tm-blue-500);
    --tm-brand-swatch-navy: var(--tm-navy-900);
    --tm-brand-swatch-white: var(--tm-white);
    --tm-brand-swatch-orange: var(--tm-orange-500);
    --tm-brand-swatch-page-tint: var(--tm-mist-50);
    --tm-brand-swatch-light-blue: var(--tm-sky-150);
    --tm-brand-swatch-light-grey: var(--tm-grey-100);
    --tm-brand-swatch-dark-grey: var(--tm-charcoal);
    --tm-brand-swatch-chart-navy: var(--tm-ocean-800);
    --tm-brand-tile-dark: var(--tm-charcoal);
    --tm-brand-tile-grey: var(--tm-grey-100);
    --tm-brand-tm-wash: var(--tm-sky-150);
    /* its asset cards (logo tiles, the T mark, the downloads): a blue outline and glow that brighten on hover; the
       jump links' wash and outline; a hovered header size; the bot's shadow */
    --tm-brand-card-border: var(--tm-blue-500-a45);
    --tm-brand-card-border-hover: var(--tm-blue-500-a85);
    --tm-brand-card-glow: var(--tm-blue-500-a22);
    --tm-brand-card-glow-hover: var(--tm-blue-500-a50);
    --tm-brand-jump-wash: var(--tm-blue-500-a12);
    --tm-brand-jump-border: var(--tm-blue-500-a32);
    --tm-brand-row-hover: var(--tm-blue-500-a10);
    --tm-brand-dl-frame: var(--tm-blue-500-a55);
    --tm-brand-bot-shadow: var(--tm-navy-900-a12);
    /* a plain chat window (worked examples on How it Works): its soft blue glow */
    --tm-window-glow: var(--tm-blue-500-a14);
    /* the line joining numbered steps, fading out towards its end */
    --tm-step-line-fade: var(--tm-blue-500-a14);
    /* a dashed aside box (How it Works "building it yourself") */
    --tm-dashed-border: var(--tm-steel-a30);
    /* an illustrative chart: its bars, frame and window dots */
    --tm-chart-bar: var(--tm-blue-150);
    --tm-chart-frame: var(--tm-steel-200);
    --tm-chart-dot: var(--tm-mist-150);
    /* the soft white halo round a sparkle (the presenter's eyes on How it Works) */
    --tm-sparkle-glow: var(--tm-white-88);
    /* form fields (tm-form): placeholder text, a hovered field's outline, an invalid field's outline and halo, its
       message, and the error alert above a form */
    --tm-field-placeholder: var(--tm-mist-400);
    --tm-field-hover: var(--tm-blue-500-a50);
    --tm-field-invalid: var(--tm-red-600);
    --tm-field-invalid-halo: var(--tm-red-600-a14);
    --tm-field-error-text: var(--tm-red-700);
    --tm-alert-text: var(--tm-red-800);
    --tm-alert-wash: var(--tm-red-600-a06);
    --tm-alert-border: var(--tm-red-600-a38);
    /* a "Sign in with Xero" button on hover: Xero's own blue */
    --tm-sso-xero: var(--tm-xero-blue);
    --tm-sso-xero-halo: var(--tm-xero-blue-a14);
    /* the hour ring (Performance and Reliability): an hour still to come, an hour already run */
    --tm-ring-idle: var(--tm-mist-175);
    --tm-ring-done: var(--tm-blue-200);
    /* a bar in an illustrative bar chart (the storage ladder): its outline */
    --tm-bar-border: var(--tm-blue-500-a35);
    /* a data table's frame (the support response times), and its highlighted row's wash */
    --tm-table-frame: var(--tm-steel-200);
    --tm-table-row-cta: var(--tm-orange-500-a05);

    /* Text */
    --tm-text-strong: var(--tm-navy-900);
    --tm-text: var(--tm-slate-700);
    --tm-text-muted: var(--tm-slate-500);
    --tm-text-inverse: var(--tm-white);
    --tm-text-brand-grey: var(--tm-charcoal);
    /* form errors and error flash messages */
    --tm-text-error: var(--tm-orange-700);

    /* Accent (links, highlights) */
    --tm-accent: var(--tm-blue-500);
    --tm-accent-strong: var(--tm-blue-700);
    --tm-accent-glow: var(--tm-blue-500-glow);
    --tm-accent-soft-glow: var(--tm-blue-500-a10);
    --tm-accent-faint-glow: var(--tm-blue-500-a12);
    --tm-highlight-glow: var(--tm-white-55);
    /* the rotating highlight around featured cards (hero chat, CTA) */
    --tm-ring-dark: var(--tm-blue-600);
    --tm-ring-mid: var(--tm-blue-400);
    --tm-ring-light: var(--tm-blue-300);
    --tm-ring-pale: var(--tm-blue-100);
    /* the rising arrow behind the three steps, and the flash when the light reaches its head */
    --tm-climb: var(--tm-blue-800);
    --tm-climb-flash: var(--tm-white);
    --tm-climb-flash-glow: var(--tm-blue-500-a85);

    /* Call to action */
    --tm-cta: var(--tm-orange-500);
    --tm-cta-strong: var(--tm-orange-700);
    --tm-cta-glow: var(--tm-orange-500-glow);
    --tm-cta-gradient-top: var(--tm-orange-400);
    --tm-cta-gradient-bottom: var(--tm-orange-600);
    --tm-cta-sheen: var(--tm-white-45);
    --tm-cta-tint: var(--tm-orange-500-a12);
    --tm-cta-tint-border: var(--tm-orange-500-a34);
    --tm-cta-tag-border: var(--tm-orange-500-a55);
    --tm-cta-pill-border: var(--tm-orange-500-a75);
    --tm-quote-border: var(--tm-orange-500-a55);
    /* the final call-to-action block: a slower, orange version of the rotating ring, over a cool-to-warm wash */
    --tm-cta-ring-dark: var(--tm-orange-800);
    --tm-cta-ring-mid: var(--tm-orange-300);
    --tm-cta-ring-light: var(--tm-orange-200);
    --tm-cta-ring-pale: var(--tm-orange-50);
    --tm-cta-ring-rest: var(--tm-mist-150);
    /* the connector page's closing box rests on a warm ring, so the whole border reads orange (#2715) */
    --tm-cta-ring-rest-warm: var(--tm-orange-100);
    --tm-cta-block-glow-cool: var(--tm-blue-500-a14);
    --tm-cta-block-glow-warm: var(--tm-orange-500-a11);
    --tm-cta-block-wash: var(--tm-mist-75);
    /* blue primary button, used where the orange one would compete (the pricing box) */
    --tm-accent-btn-top: var(--tm-blue-450);
    --tm-accent-btn-bottom: var(--tm-blue-550);
    --tm-accent-btn-glow: var(--tm-blue-500-a35);
    --tm-accent-btn-glow-strong: var(--tm-blue-500-a50);

    /* pricing plan cards (_PlanCards): the rotating glow and border colour of each card, in plan order.
       deep/mid/bright are the glow's lobe, frame the lit border, wash the tint down from the card's top,
       edge the resting border, base the dim glow kept all the way round. */
    --tm-plan1-deep: var(--tm-orange-800);
    --tm-plan1-mid: var(--tm-orange-500);
    --tm-plan1-bright: var(--tm-orange-100);
    --tm-plan1-frame: var(--tm-orange-600);
    --tm-plan1-wash: var(--tm-orange-500-a13);
    --tm-plan1-edge: var(--tm-orange-500-a42);
    --tm-plan1-base: var(--tm-orange-500-a34);
    --tm-plan2-deep: var(--tm-azure-700);
    --tm-plan2-mid: var(--tm-blue-500);
    --tm-plan2-bright: var(--tm-blue-100);
    --tm-plan2-frame: var(--tm-blue-400);
    --tm-plan2-wash: var(--tm-blue-500-a13);
    --tm-plan2-edge: var(--tm-blue-500-a40);
    --tm-plan2-base: var(--tm-blue-500-a32);
    --tm-plan3-deep: var(--tm-steel-800);
    --tm-plan3-mid: var(--tm-steel-600);
    --tm-plan3-bright: var(--tm-steel-300);
    --tm-plan3-frame: var(--tm-steel-700);
    --tm-plan3-wash: var(--tm-steel-a06);
    --tm-plan3-edge: var(--tm-steel-a38);
    --tm-plan3-base: var(--tm-steel-a30);
    --tm-plan4-deep: var(--tm-gold-700);
    --tm-plan4-mid: var(--tm-gold-400);
    --tm-plan4-bright: var(--tm-gold-100);
    --tm-plan4-frame: var(--tm-gold-500);
    --tm-plan4-wash: var(--tm-gold-400-a16);
    --tm-plan4-edge: var(--tm-gold-500-a55);
    --tm-plan4-base: var(--tm-gold-400-a28);
    --tm-plan-rest: var(--tm-steel-a18);
    --tm-plan-rest-mid: var(--tm-steel-a20);
    --tm-plan-rest-end: var(--tm-steel-a14);
    --tm-plan-card-end: var(--tm-mist-30);
    /* the outline of a small accent chip (the annual saving) */
    --tm-accent-chip-border: var(--tm-blue-500-a40);
    /* a strong blue glow (the pricing page's included-feature icons on hover) */
    --tm-accent-glow-strong: var(--tm-blue-500-a55);
    /* a pale blue pill (connector feature pills) and its outline */
    --tm-accent-tint: var(--tm-blue-500-a10);
    --tm-accent-tint-border: var(--tm-blue-500-a50);
    /* a block framed in blue (connector request box, newsletter): resting glow, the tight and wide glows on hover,
       and the halo round a focused field */
    --tm-accent-frame-glow: var(--tm-blue-500-a22);
    --tm-accent-frame-glow-tight: var(--tm-blue-500-a45);
    --tm-accent-frame-glow-wide: var(--tm-blue-500-a25);
    --tm-accent-focus-halo: var(--tm-blue-500-a18);
    /* a pale orange button (the connector request box), and its hover */
    --tm-cta-tint-strong: var(--tm-orange-500-a20);

    /* webinar banner (chrome.css): the icon disc's glow, its ripple ring, the button's hover glow and shadow */
    --tm-event-glow: var(--tm-white-45);
    --tm-event-ring: var(--tm-white-90);
    --tm-event-glow-strong: var(--tm-white-60);
    --tm-event-btn-shadow: var(--tm-charcoal-a18);

    /* webinar cards (#2626): the glow round an upcoming session's card, and a recording's card frame */
    --tm-upcoming-glow: var(--tm-orange-500-a20);
    --tm-recorded-frame: var(--tm-blue-500-a38);

    /* listing pages (#2581): the featured item's resting ring, its "Latest" pill's outline and its label's lit dot;
       the newsletter block's orange glows on hover */
    --tm-listing-feature-ring: var(--tm-blue-500-a55);
    --tm-listing-art-pill-border: var(--tm-blue-500-a85);
    --tm-listing-label-dot-glow: var(--tm-white-90);
    --tm-cta-frame-glow-tight: var(--tm-orange-500-a42);
    --tm-cta-frame-glow-wide: var(--tm-orange-500-a20);

    /* detail pages (#2582): a speech bubble (a story's quote, an example prompt); the resting part of a blue moving
       ring (the story's "Get started" box) */
    --tm-bubble: var(--tm-sky-100);
    --tm-ring-rest-blue: var(--tm-blue-150);
    /* listing and related cards: the pale blue frame, and the glow round it on hover; the link grid's drop shadow */
    --tm-card-frame: var(--tm-blue-500-a38);
    --tm-card-frame-glow: var(--tm-blue-500-a18);
    --tm-links-shadow: var(--tm-navy-900-a10);
    /* a guide's download card: its dark grey moving ring (dark, resting, mid and light) */
    --tm-ring-grey-dark: var(--tm-graphite-900);
    --tm-ring-grey-rest: var(--tm-charcoal);
    --tm-ring-grey-mid: var(--tm-graphite-700);
    --tm-ring-grey-light: var(--tm-graphite-400);
    --tm-ring-grey-pale: var(--tm-graphite-200);

    /* Type */
    --tm-font-display: 'Source Sans Pro', -apple-system, sans-serif;
    --tm-font-mono: 'Source Code Pro', monospace;
}