/* GDS elevation, radii, sizing and breakpoint tokens. */
:root{
/* Elevation — level 0 is the page canvas and carries no shadow. */
--gds-elevation-level-0:none;
--gds-elevation-level-1:0px 1px 4px 0px rgba(18,18,18,.15);
--gds-elevation-level-2:0px 2px 8px 0px rgba(18,18,18,.15);
--gds-elevation-level-3:0px 3px 12px 0px rgba(18,18,18,.18);
--gds-elevation-level-4:0px 8px 20px 0px rgba(0,0,0,.35);

/* Radii — GDS is a low-radius system. */
--gds-radius-input:2px;
--gds-radius-card:4px;
--gds-radius-pill:24px;
--gds-radius-share-card:16px;
--gds-radius-circle:50%;

/* Borders */
--gds-border-width:1px;
--gds-border-width-emphasis:2px;
--gds-border-width-error:2px;
--gds-ticket-header-height:24px;
--gds-ticket-header-height-thin:4px;

/* Sizing */
--gds-min-tap-size:44px;
--gds-icon-viewbox:24px;
--gds-icon-margin:10px;
--gds-icon-total:44px;
--gds-circle-button-large:64px;
--gds-toggle-width:40px;
--gds-modal-width-sm:400px;
--gds-modal-width-md:600px;
--gds-modal-width-lg:740px;
--gds-side-panel-width:420px;
--gds-side-panel-width-wide:548px;
--gds-toast-max-width:336px;

/* Focus */
--gds-focus-outline-width:2px;
--gds-focus-outline-offset:2px;

/* Motion */
--gds-motion-fast:150ms; /* @kind other */
--gds-motion-default:200ms; /* @kind other */
--gds-motion-slow:300ms; /* @kind other */
--gds-motion-panel:400ms; /* @kind other */
--gds-easing-standard:cubic-bezier(.3,0,.2,1); /* @kind other */
--gds-easing-panel:cubic-bezier(.16,1,.3,1); /* @kind other */
--gds-easing-toggle:cubic-bezier(.1,.85,.25,1); /* @kind other */

/* Breakpoints (min-width) */
--gds-breakpoint-small:512px;
--gds-breakpoint-medium:1024px;
--gds-breakpoint-large:1680px;

/* Component-level defaults. Components read these; they are never redeclared
   inside a component rule, so consumers can retheme them from one place. */
--gds-alert-border-info:#024ddf;
--gds-alert-border-success:#048851;
--gds-alert-border-warning:#ffb932;
--gds-alert-border-danger:#eb0000;
--gds-accordion-inline-padding:24px;
--gds-accordion-block-padding:16px;
--gds-accordion-border-color:#ebebeb;
--gds-accordion-border-color-inverse:rgba(235,235,235,.25);
--gds-accordion-bg:#ffffff;
--gds-accordion-bg-inverse:#121212;
--gds-accordion-hover-bg:#ebebeb;
--gds-accordion-hover-bg-inverse:rgba(255,255,255,.05);
--gds-modal-padding:24px;
--gds-sidepanel-padding:24px;
--gds-sidepanel-border-color:#d6d6d6;
--gds-sidepanel-icon:32px;
--gds-toggle-color:#024ddf;
--gds-toggle-color-hover:#023aa7;
--gds-toggle-color-resale:#d0006f;
--gds-toggle-color-resale-hover:#9c0053;
--gds-stack-gap:16px;
}

/* The modal is the one component whose padding steps up on desktop. */
@media (min-width:640px){:root{--gds-modal-padding:32px}}