/* Lumia - Tokens */

:root {
  color-scheme: dark;

  /* Color - Brand: the Presago logo turquoise, which primary items, brand text, links and brand tints derive from in the
   * dark variants; Light takes its own primary and brand text from Flow */
  --color-brand-primary: #00CEBF;

  /* Color - Item */
  --color-item-disabled: var(--color-surface-raised);

  --color-item-primary-idle: var(--color-brand-primary);
  --color-item-primary-hover: color-mix(in srgb, var(--color-item-primary-idle) 60%, white);
  --color-item-primary-pressed: color-mix(in srgb, var(--color-item-primary-idle) 75%, black);

  --color-item-secondary-idle: #404040;
  --color-item-secondary-hover: #525252;
  --color-item-secondary-pressed: #262626;

  --color-item-subtle-idle: var(--color-surface-raised);
  --color-item-subtle-hover: #383838;
  --color-item-subtle-pressed: var(--color-item-secondary-hover);
  /* Selected items rest on the pressed fill and hover on the hover fill of their family; dark Secondary rests on the
     Subtle pressed fill, which matches its own hover fill, so it hovers on a lighter neutral */
  --color-item-secondary-selected: var(--color-item-subtle-pressed);
  --color-item-secondary-hover-selected: #737373;
  --color-item-subtle-selected: var(--color-item-subtle-pressed);
  --color-item-subtle-hover-selected: var(--color-item-subtle-hover);

  /* Translucent tints of the default text color, so they lighten dark themes and darken Light */
  --color-item-ghost-hover: color-mix(in srgb, var(--color-text-default) 10%, transparent);
  --color-item-ghost-pressed: color-mix(in srgb, var(--color-text-default) 20%, transparent);
  --color-item-navigation-hover: color-mix(in srgb, var(--color-text-default) 8%, transparent);

  /* Translucent tints of the element's own text color, for controls on colored surfaces */
  --color-item-inherit-hover: color-mix(in srgb, currentColor 10%, transparent);
  --color-item-inherit-pressed: color-mix(in srgb, currentColor 20%, transparent);

  --color-item-success-idle: #34D399;
  --color-item-success-hover: color-mix(in srgb, var(--color-item-success-idle) 60%, white);
  --color-item-success-pressed: color-mix(in srgb, var(--color-item-success-idle) 75%, black);

  --color-item-warning-idle: #FBBF24;
  --color-item-warning-hover: color-mix(in srgb, var(--color-item-warning-idle) 60%, white);
  --color-item-warning-pressed: color-mix(in srgb, var(--color-item-warning-idle) 75%, black);

  /* Danger pressed darkens only as far as its dark text keeps 4.5:1 */
  --color-item-danger-idle: #EF4444;
  --color-item-danger-hover: color-mix(in srgb, var(--color-item-danger-idle) 60%, white);
  --color-item-danger-pressed: color-mix(in srgb, var(--color-item-danger-idle) 92%, black);

  /* The selected select option and its hover; with no option hovered or active, the selected one shows the hover fill */
  --color-item-option-selected: transparent;
  --color-item-option-hover-selected: var(--color-item-subtle-hover);

  /* Unchecked toggle track */
  --color-item-toggle-idle: transparent;

  /* Tag fills and their text: the item fills in the dark variants, tints of the variant hue in Light */
  --color-item-tag-brand-idle: var(--color-item-primary-idle);
  --color-item-tag-success-idle: var(--color-item-success-idle);
  --color-item-tag-warning-idle: var(--color-item-warning-idle);
  --color-item-tag-danger-idle: var(--color-item-danger-idle);

  /* Color - Surface */
  --color-surface-default: #151515;
  --color-surface-raised: #262626;
  --color-surface-header: color-mix(in srgb, var(--color-surface-default) 95%, transparent);
  --color-surface-floating: color-mix(in srgb, var(--color-surface-default) 80%, transparent);
  --color-surface-navigation-panel: color-mix(in srgb, var(--color-surface-default) 98%, transparent);
  --color-surface-overlay: color-mix(in srgb, var(--color-surface-default) 50%, transparent);
  --color-surface-scrim: color-mix(in srgb, var(--color-surface-default) 80%, transparent);
  --color-surface-brand: color-mix(in srgb, var(--color-item-primary-idle) 8%, var(--color-surface-default));
  --color-surface-brand-glow: color-mix(in srgb, var(--color-item-primary-idle) 12%, transparent);

  /* Color - Text */
  --color-text-default: #FAFAFA;
  --color-text-subtle: #A3A3A3;
  --color-text-disabled: #525252;
  --color-text-inverse: #0A0A0A;
  --color-text-brand: color-mix(in srgb, var(--color-brand-primary) 80%, white);
  --color-text-success: var(--color-item-success-idle);
  --color-text-warning: var(--color-item-warning-idle);
  /* The closest tone to #EF4444 that keeps 4.5:1 on the raised surface */
  --color-text-danger: #F35858;

  /* Color - Text on item fills (idle, hover and pressed) */
  --color-text-on-item-primary: var(--color-text-inverse);
  --color-text-on-item-secondary: var(--color-text-default);
  --color-text-on-item-subtle: var(--color-text-default);
  --color-text-on-item-success: var(--color-text-inverse);
  --color-text-on-item-warning: var(--color-text-inverse);
  --color-text-on-item-danger: var(--color-text-inverse);
  --color-text-on-item-tag-brand: var(--color-text-on-item-primary);
  --color-text-on-item-tag-success: var(--color-text-on-item-success);
  --color-text-on-item-tag-warning: var(--color-text-on-item-warning);
  --color-text-on-item-tag-danger: var(--color-text-on-item-danger);

  /* Color - Link: mixed in Oklab, where white keeps the brand hue */
  --color-link-idle: color-mix(in oklab, var(--color-brand-primary) 85%, white);
  --color-link-hover: color-mix(in oklab, var(--color-brand-primary) 60%, white);
  --color-link-pressed: var(--color-brand-primary);

  /* Color - Border: neutral steps from the surface toward the default text */
  --color-border-default: color-mix(in srgb, var(--color-text-default) 19%, var(--color-surface-default));
  --color-border-hover: color-mix(in srgb, var(--color-text-default) 62%, var(--color-surface-default));
  --color-border-input: color-mix(in srgb, var(--color-text-default) 40%, var(--color-surface-default));
  --color-border-disabled: color-mix(in srgb, var(--color-text-default) 7%, var(--color-surface-default));
  --color-border-focused: var(--color-brand-primary);
  --color-border-danger: var(--color-item-danger-idle);
  --color-border-brand: color-mix(in srgb, var(--color-item-primary-idle) 30%, var(--color-border-default));
  --color-border-navigation-hover: color-mix(in srgb, var(--color-text-default) 5%, transparent);
  --color-border-navigation-panel: color-mix(in srgb, var(--color-text-default) 16%, transparent);
  --color-border-navigation-focused: color-mix(in srgb, var(--color-text-default) 50%, transparent);

  /* Brand background */
  --gradient-brand: radial-gradient(ellipse at center, var(--color-surface-brand-glow), transparent 70%);

  /* Font - Family: headings share the body family; display headings use Archivo at the display width */
  --font-family-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: var(--font-family-body);
  --font-family-display: "Archivo", var(--font-family-body);
  --font-family-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Font - Stretch */
  --font-stretch-display: 120%;

  /* Font - Size */
  --font-size-heading-h1: 2.25rem;
  --font-size-heading-h2: 1.875rem;
  --font-size-heading-h3: 1.5rem;
  --font-size-heading-h4: 1.25rem;
  --font-size-heading-h5: 1.125rem;
  --font-size-heading-h6: 1rem;

  --font-size-display-sm: 3rem;
  --font-size-display-md: 3.75rem;
  --font-size-display-lg: 4.5rem;
  --font-size-display-fluid-growth: 3vw;
  --font-size-display-sm-fluid: clamp(var(--font-size-heading-h2), calc(var(--font-size-display-sm) / 2 + var(--font-size-display-fluid-growth)), var(--font-size-display-sm));
  --font-size-display-md-fluid: clamp(var(--font-size-heading-h1), calc(var(--font-size-display-md) / 2 + var(--font-size-display-fluid-growth)), var(--font-size-display-md));
  --font-size-display-lg-fluid: clamp(var(--font-size-heading-h1), calc(var(--font-size-display-lg) / 2 + var(--font-size-display-fluid-growth)), var(--font-size-display-lg));

  --font-size-body-large: 1.125rem;
  --font-size-body-medium: 1rem;
  --font-size-body-small: 0.875rem;

  --font-size-caption: 0.75rem;

  /* Font - Weight */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line height */
  --line-height-heading-h1: 1.2;
  --line-height-heading-h2: 1.25;
  --line-height-heading-h3: 1.3;
  --line-height-heading-h4: 1.35;
  --line-height-heading-h5: 1.4;
  --line-height-heading-h6: 1.45;
  --line-height-display: 1.1;

  --line-height-body: 1.5;
  --line-height-compact: 1.25;
  --line-height-none: 1;

  /* Letter spacing */
  --letter-spacing-display: -0.025em;
  --letter-spacing-uppercase: 0.04em;

  /* Shadow: a single-layer elevation scale whose themes change only the color */
  --color-shadow: rgb(0 0 0 / 50%);
  --shadow-xs: 0 1px 4px var(--color-shadow);
  --shadow-sm: 0 3px 8px var(--color-shadow);
  --shadow-md: 0 6px 16px var(--color-shadow);
  --shadow-lg: 0 12px 24px var(--color-shadow);
  --shadow-brand: 0 0 48px var(--color-surface-brand-glow);

  /* Blur behind translucent surfaces */
  --blur-navigation-panel: 10px;
  --blur-header: 12px;

  /* Spacing */
  --spacing-0: 0;
  --spacing-025: 2px;
  --spacing-050: 4px;
  --spacing-075: 6px;
  --spacing-100: 8px;
  --spacing-150: 12px;
  --spacing-200: 16px;
  --spacing-250: 20px;
  --spacing-300: 24px;
  --spacing-400: 32px;
  --spacing-500: 40px;
  --spacing-600: 48px;
  --spacing-800: 64px;
  --spacing-1000: 80px;
  --spacing-1200: 96px;
  --spacing-1600: 128px;
  --spacing-2000: 160px;

  --spacing-section-sm: var(--spacing-1200);
  --spacing-section-md: var(--spacing-1600);
  --spacing-section-lg: var(--spacing-2000);

  --spacing-navigation-gap: 0.35rem;
  --spacing-navigation-offset: 0.7rem;
  --spacing-navigation-panel: 0.55rem;
  --spacing-navigation-link-block: 0.65rem;
  --spacing-navigation-link-inline: 0.8rem;

  /* Size */
  --size-control-sm: 2rem;
  --size-control-md: 2.25rem;
  --size-control-lg: 3rem;
  /* Single-line fields take the control height at sm and md, this one at lg */
  --size-field-lg: 2.625rem;
  --size-container-sm: 900px;
  --size-container-md: 1000px;
  --size-container-lg: 1200px;
  --size-container-xl: 1440px;
  --size-header: 56px;
  --size-banner: 48px;
  --size-logo-sm: 24px;
  --size-logo-md: 30px;
  --size-navigation-panel-min: 13rem;
  --size-avatar-sm: 2rem;
  --size-avatar-md: 3rem;
  --size-avatar-lg: 4rem;
  --size-avatar-xl: 6rem;
  --size-icon-xs: 0.75rem;
  --size-icon-sm: 1rem;
  --size-icon-md: 1.5rem;
  --size-icon-lg: 2rem;
  --size-icon-xl: 2.5rem;
  /* Icons inside Button and IconButton */
  --size-icon-button: 1.125rem;
  --size-spinner-xs: 1.125rem;
  --size-spinner-sm: 1.5rem;
  --size-spinner-md: 2rem;
  --size-spinner-lg: 2.75rem;
  --size-tooltip-max: 20rem;

  /* Aspect ratio */
  --aspect-ratio-video: 16 / 9;
  --aspect-ratio-photo: 3 / 2;
  --aspect-ratio-panorama: 2 / 1;

  /* Radius */
  --radius-0: 0;
  --radius-small: 4px;
  --radius-medium: 6px;
  --radius-large: 8px;
  --radius-xlarge: 12px;
  --radius-full: 9999px;

  /* Border */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;

  /* Opacity */
  --opacity-disabled: 0.6;

  /* Z-index */
  --z-sticky: 10;
  --z-popover: 20;
  --z-overlay: 40;
  --z-sidebar: 50;
  --z-floating: 60;
  --z-header: var(--z-floating);
  --z-header-dropdown: 70;
  --z-header-loader: 80;
  --z-skip-link: 100;

  /* Motion */
  --motion-duration-instant: 0ms;
  --motion-duration-short: 150ms;
  --motion-duration-medium: 200ms;
  --motion-duration-long: 250ms;
  --motion-duration-extended: 300ms;
  --motion-duration-large: 700ms;
  --motion-easing-linear: linear;
  --motion-easing-default: ease;
  --motion-easing-symmetric: ease-in-out;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --motion-delay-close: var(--motion-duration-extended);
  --motion-delay-tooltip: 100ms;
}

:root[data-theme="midnight"] {
  --color-item-secondary-hover-selected: var(--color-item-secondary-hover);

  /* The Dark grey roles, spaced in L* between a near-black surface and the raised surface, which subtle and disabled
   * items share */
  --color-item-secondary-idle: #242424;
  --color-item-secondary-hover: #2D2D2D;
  --color-item-secondary-pressed: var(--color-surface-default);

  --color-item-subtle-hover: #202020;

  --color-surface-default: #0C0C0C;
  --color-surface-raised: #171717;

  /* On near-black surfaces elevation reads as a light halo */
  --color-shadow: color-mix(in srgb, var(--color-text-default) 10%, transparent);
}

:root[data-theme="light"] {
  color-scheme: light;

  /* Flow's Lumia Light palette: neutrals, status hues and text tones are declared as Flow gives them; state fills,
   * tag fills, tints and links derive from them */
  --color-item-disabled: #F3F5F8;

  --color-item-primary-idle: #00A3A3;
  --color-item-primary-hover: color-mix(in srgb, var(--color-item-primary-idle) 94%, black);
  --color-item-primary-pressed: color-mix(in srgb, var(--color-item-primary-idle) 88%, black);

  --color-item-secondary-idle: #EEF0F3;
  --color-item-secondary-hover: #E6E8EB;
  --color-item-secondary-pressed: #DEE0E3;
  --color-item-secondary-hover-selected: var(--color-item-secondary-hover);

  --color-item-subtle-idle: var(--color-surface-default);
  --color-item-subtle-hover: var(--color-item-secondary-hover);
  --color-item-subtle-pressed: var(--color-item-secondary-pressed);

  --color-item-success-idle: #009336;
  --color-item-success-hover: color-mix(in srgb, var(--color-item-success-idle) 94%, black);
  --color-item-success-pressed: color-mix(in srgb, var(--color-item-success-idle) 88%, black);

  --color-item-warning-idle: #FFB800;
  --color-item-warning-hover: color-mix(in srgb, var(--color-item-warning-idle) 94%, black);
  --color-item-warning-pressed: color-mix(in srgb, var(--color-item-warning-idle) 86%, black);

  --color-item-danger-idle: #E71C3E;
  --color-item-danger-hover: color-mix(in srgb, var(--color-item-danger-idle) 88%, black);
  --color-item-danger-pressed: color-mix(in srgb, var(--color-item-danger-idle) 76%, black);

  --color-item-option-selected: var(--color-item-tag-brand-idle);
  --color-item-option-hover-selected: color-mix(in srgb, var(--color-item-primary-idle) 34%, white);

  /* Tag fills tint their item fill toward white */
  --color-item-tag-brand-idle: color-mix(in srgb, var(--color-item-primary-idle) 22%, white);
  --color-item-tag-success-idle: color-mix(in srgb, var(--color-item-success-idle) 22%, white);
  --color-item-tag-warning-idle: color-mix(in srgb, var(--color-item-warning-idle) 22%, white);
  --color-item-tag-danger-idle: color-mix(in srgb, var(--color-item-danger-idle) 22%, white);

  --color-surface-default: #FFFFFF;
  --color-surface-raised: #F9FBFE;
  --color-surface-scrim: color-mix(in srgb, var(--color-text-default) 80%, transparent);

  --gradient-brand: none;
  --color-shadow: color-mix(in srgb, var(--color-text-default) 20%, transparent);
  --shadow-brand: var(--shadow-xs);

  --color-text-default: #242831;
  --color-text-subtle: #676B72;
  --color-text-disabled: #9FA3AB;
  --color-text-inverse: #FFFFFF;
  --color-text-brand: #0097A8;
  --color-text-warning: #BF6900;
  --color-text-danger: var(--color-item-danger-idle);

  /* The warning fill is light enough to carry the default text */
  --color-text-on-item-warning: var(--color-text-default);
  --color-text-on-item-tag-brand: #006C6C;
  --color-text-on-item-tag-success: #006E29;
  --color-text-on-item-tag-warning: #A55A00;
  --color-text-on-item-tag-danger: var(--color-item-danger-pressed);

  /* Flow defines no hover tone: hover sits halfway between idle and pressed */
  --color-link-idle: var(--color-text-brand);
  --color-link-hover: color-mix(in srgb, var(--color-link-idle) 91%, black);
  --color-link-pressed: color-mix(in srgb, var(--color-link-idle) 82%, black);

  --color-border-default: var(--color-item-secondary-pressed);
  --color-border-hover: #7C8088;
  --color-border-input: #8D9199;
  --color-border-disabled: var(--color-item-secondary-hover);
  --color-border-focused: var(--color-item-primary-idle);
  --color-border-brand: var(--color-item-primary-idle);
}

:root[data-theme="light-wcag"] {
  color-scheme: light;

  /* Light tuned to WCAG AA: text keeps 4.5:1 and non-text content 3:1 against its backgrounds */

  --color-item-disabled: #E9ECEF;

  --color-item-primary-idle: color-mix(in srgb, var(--color-brand-primary) 64%, black);
  --color-item-primary-hover: color-mix(in srgb, var(--color-item-primary-idle) 88%, black);
  --color-item-primary-pressed: color-mix(in srgb, var(--color-item-primary-idle) 76%, black);

  --color-item-secondary-idle: #F1F3F5;
  --color-item-secondary-hover: #E9ECEF;
  --color-item-secondary-pressed: var(--color-item-secondary-hover);
  --color-item-secondary-selected: var(--color-item-secondary-pressed);
  --color-item-secondary-hover-selected: var(--color-item-secondary-hover);

  --color-item-subtle-idle: var(--color-surface-default);
  --color-item-subtle-hover: #E9ECEF;
  --color-item-subtle-pressed: var(--color-item-subtle-hover);

  /* Status fills darken through their states, keeping 4.5:1 with white text */
  --color-item-success-idle: #047857;
  --color-item-success-hover: color-mix(in srgb, var(--color-item-success-idle) 88%, black);
  --color-item-success-pressed: color-mix(in srgb, var(--color-item-success-idle) 76%, black);

  --color-item-warning-idle: #B66004;
  --color-item-warning-hover: color-mix(in srgb, var(--color-item-warning-idle) 88%, black);
  --color-item-warning-pressed: color-mix(in srgb, var(--color-item-warning-idle) 76%, black);

  --color-item-danger-idle: #C92A2A;
  --color-item-danger-hover: color-mix(in srgb, var(--color-item-danger-idle) 88%, black);
  --color-item-danger-pressed: color-mix(in srgb, var(--color-item-danger-idle) 76%, black);

  --color-item-option-selected: var(--color-item-tag-brand-idle);
  --color-item-option-hover-selected: color-mix(in srgb, var(--color-brand-primary) 29%, white);

  --color-item-toggle-idle: #DEE2E6;

  --color-item-tag-brand-idle: color-mix(in srgb, var(--color-brand-primary) 14%, white);
  --color-item-tag-success-idle: #D3F9D8;
  --color-item-tag-warning-idle: #FFF3BF;
  --color-item-tag-danger-idle: #FFE3E3;

  --color-surface-default: #FFFFFF;
  --color-surface-raised: #F8F9FA;
  --color-surface-scrim: color-mix(in srgb, var(--color-text-default) 80%, transparent);

  --gradient-brand: none;
  --color-shadow: color-mix(in srgb, var(--color-text-default) 20%, transparent);
  --shadow-brand: var(--shadow-xs);

  --color-text-default: #282828;
  /* Subtle, success and warning text take the lightest tone of their hue that keeps 4.5:1 on both surfaces */
  --color-text-subtle: #71727B;
  --color-text-disabled: #ADB5BD;
  --color-text-inverse: #FFFFFF;
  --color-text-brand: color-mix(in srgb, var(--color-brand-primary) 56%, black);
  /* Darkened just enough to keep 4.5:1 on the raised surface */
  --color-text-warning: color-mix(in srgb, var(--color-item-warning-idle) 96%, black);
  --color-text-danger: var(--color-item-danger-idle);

  /* Tag text darkens the text color of its hue, keeping 4.5:1 on the tinted fill */
  --color-text-on-item-tag-brand: color-mix(in srgb, var(--color-text-brand) 85%, black);
  --color-text-on-item-tag-success: color-mix(in srgb, var(--color-text-success) 85%, black);
  --color-text-on-item-tag-warning: color-mix(in srgb, var(--color-text-warning) 85%, black);
  --color-text-on-item-tag-danger: color-mix(in srgb, var(--color-text-danger) 85%, black);

  --color-link-idle: var(--color-text-brand);
  --color-link-hover: color-mix(in srgb, var(--color-brand-primary) 61%, black);
  --color-link-pressed: color-mix(in srgb, var(--color-brand-primary) 40%, black);

  --color-border-default: color-mix(in srgb, var(--color-text-default) 20%, var(--color-surface-default));
  /* Hovered and field borders keep 3:1 on white */
  --color-border-hover: color-mix(in srgb, var(--color-text-default) 68%, var(--color-surface-default));
  --color-border-input: color-mix(in srgb, var(--color-text-default) 51%, var(--color-surface-default));
  --color-border-disabled: color-mix(in srgb, var(--color-text-default) 14%, var(--color-surface-default));
  --color-border-focused: color-mix(in srgb, var(--color-brand-primary) 80%, black);
}