/* internet.io design tokens. Generated by scripts/build.mjs from tokens/*.json. Do not edit by hand. */
:root {

  /* Colour: primitives */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-blue-25: #f0faff;
  --color-blue-50: #fbfcff;
  --color-blue-75: #eaf2ff;
  --color-blue-100: #d4e4ff;
  --color-blue-200: #b8d2ff;
  --color-blue-300: #94bcff;
  --color-blue-400: #70a6ff;
  --color-blue-500: #4d8fff;
  --color-blue-600: #2979ff;
  --color-blue-650: #1565f0;
  --color-blue-700: #1b51aa;
  --color-blue-800: #153d80;
  --color-blue-900: #0e2855;
  --color-blue-1000: #081833;
  --color-neutral-50: #f8f8f8;
  --color-neutral-75: #f5f5f5;
  --color-neutral-100: #f1f1f1;
  --color-neutral-200: #e7e7e7;
  --color-neutral-300: #dcdcdc;
  --color-neutral-330: rgba(220, 220, 220, 0.3);
  --color-neutral-400: #d0d0d0;
  --color-neutral-500: #c4c4c4;
  --color-neutral-600: #b8b8b8;
  --color-neutral-650: #6b6b6b;
  --color-neutral-700: #7b7b7b;
  --color-neutral-800: #5c5c5c;
  --color-neutral-900: #3d3d3d;
  --color-neutral-1000: #111111;
  --color-red-100: #fad7d7;
  --color-red-200: #f6bdbc;
  --color-red-300: #f29c9a;
  --color-red-400: #ee7b78;
  --color-red-500: #e95a57;
  --color-red-600: #e53935;
  --color-red-650: #c5221f;
  --color-red-700: #992623;
  --color-red-800: #731d1b;
  --color-red-900: #4c1312;
  --color-red-1000: #2e0b0b;
  --color-cyan-300: #8fe6ff;
  --color-cyan-400: #32c6fe;
  --color-sky-400: #4fabfd;
  --color-orange-600: #ff6154;

  /* Colour: semantic */
  --color-text-primary: var(--color-neutral-1000);
  --color-text-body: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-800);
  --color-text-muted: var(--color-neutral-650);
  --color-text-disabled: var(--color-neutral-600);
  --color-text-on-action: var(--color-white);
  --color-text-link: var(--color-blue-700);
  --color-text-brand: var(--color-blue-700);
  --color-text-danger: var(--color-red-650);
  --color-text-danger-on-tint: var(--color-red-700);
  --color-surface-page: var(--color-white);
  --color-surface-card: var(--color-neutral-75);
  --color-surface-sunken: var(--color-neutral-100);
  --color-surface-hover: var(--color-neutral-50);
  --color-surface-brand-wash: var(--color-blue-75);
  --color-surface-brand-subtle: var(--color-blue-50);
  --color-surface-danger: var(--color-red-100);
  --color-surface-overlay: rgba(0, 0, 0, 0.32);
  --color-surface-chip-from: var(--color-blue-25);
  --color-surface-chip-to: var(--color-blue-100);
  --color-border-default: var(--color-neutral-300);
  --color-border-strong: var(--color-neutral-600);
  --color-border-subtle: var(--color-neutral-330);
  --color-border-brand: var(--color-blue-100);
  --color-border-focus: var(--color-blue-600);
  --color-border-danger: var(--color-red-600);
  --color-border-input: var(--color-neutral-700);
  --color-action-primary: var(--color-blue-600);
  --color-action-primary-hover: var(--color-blue-650);
  --color-action-primary-pressed: var(--color-blue-700);
  --color-action-danger: var(--color-red-650);
  --color-action-primary-accessible: var(--color-blue-650);
  --color-action-danger-hover: var(--color-red-700);
  --color-feedback-danger: var(--color-red-600);
  --color-feedback-brand: var(--color-blue-600);
  --color-effect-glow: var(--color-cyan-400);
  --color-effect-glow-highlight: var(--color-cyan-300);
  --color-effect-shimmer: var(--color-sky-400);
  --color-effect-third-party-ph: var(--color-orange-600);

  /* Colour: Material 3 (Android layer) */
  --color-m3-primary: var(--color-blue-600);
  --color-m3-on-surface: #1d1b20;
  --color-m3-on-surface-variant: #49454f;
  --color-m3-outline: #79747e;
  --color-m3-outline-variant: #cac4d0;
  --color-m3-secondary-container: #dbe6fb;
  --color-m3-surface-container: #f3f4f9;
  --color-m3-surface-container-high: #eceef4;
  --color-m3-inverse-surface: #322f35;
  --color-m3-inverse-on-surface: #f5eff7;
  --color-m3-inverse-primary: #adc6ff;
  --color-m3-error: var(--color-red-650);

  /* Type: families, weights, sizes */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-system: "Roboto", "Inter", system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 56px;
  --text-6xl: 72px;

  /* Type: text styles */
  --type-caption-size: var(--text-2xs);
  --type-caption-line: 12px;
  --type-caption-weight: var(--font-weight-medium);
  --type-caption-tracking: 0px;
  --type-label-size: var(--text-xs);
  --type-label-line: 20px;
  --type-label-weight: var(--font-weight-medium);
  --type-label-tracking: 0px;
  --type-body-sm-size: var(--text-sm);
  --type-body-sm-line: 20px;
  --type-body-sm-weight: var(--font-weight-regular);
  --type-body-sm-tracking: 0px;
  --type-body-size: var(--text-md);
  --type-body-line: 24px;
  --type-body-weight: var(--font-weight-regular);
  --type-body-tracking: 0px;
  --type-label-strong-size: var(--text-sm);
  --type-label-strong-line: 20px;
  --type-label-strong-weight: var(--font-weight-semibold);
  --type-label-strong-tracking: 0px;
  --type-title-sm-size: var(--text-md);
  --type-title-sm-line: 24px;
  --type-title-sm-weight: var(--font-weight-semibold);
  --type-title-sm-tracking: 0px;
  --type-title-size: var(--text-lg);
  --type-title-line: 28px;
  --type-title-weight: var(--font-weight-semibold);
  --type-title-tracking: 0px;
  --type-heading-sm-size: var(--text-xl);
  --type-heading-sm-line: 30px;
  --type-heading-sm-weight: var(--font-weight-semibold);
  --type-heading-sm-tracking: -0.5px;
  --type-heading-size: var(--text-2xl);
  --type-heading-line: 32px;
  --type-heading-weight: var(--font-weight-semibold);
  --type-heading-tracking: -0.5px;
  --type-display-sm-size: var(--text-3xl);
  --type-display-sm-line: 40px;
  --type-display-sm-weight: var(--font-weight-semibold);
  --type-display-sm-tracking: -0.5px;
  --type-display-size: var(--text-4xl);
  --type-display-line: 48px;
  --type-display-weight: var(--font-weight-semibold);
  --type-display-tracking: -0.5px;
  --type-hero-size: var(--text-6xl);
  --type-hero-line: 88px;
  --type-hero-weight: var(--font-weight-semibold);
  --type-hero-tracking: -0.5px;

  /* Space and control sizes */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-0-5: 2px;
  --size-control-sm: 32px;
  --size-control-md: 40px;
  --size-control-lg: 48px;

  /* Radius */
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* Elevation and focus */
  --shadow-up-sm: 0 -2px 4px 0 rgba(184, 184, 184, 0.24);
  --shadow-up-md: 0 -8px 16px 0 rgba(196, 196, 196, 0.25);
  --shadow-hero: 0 2px 5px 0 rgba(41, 121, 255, 0.1), 0 9px 9px 0 rgba(41, 121, 255, 0.09), 0 21px 13px 0 rgba(41, 121, 255, 0.05), 0 38px 15px 0 rgba(41, 121, 255, 0.01), 0 59px 17px 0 rgba(41, 121, 255, 0);
  --shadow-popover: 0 2px 5px rgba(0, 31, 82, 0.07), 0 12px 32px rgba(0, 31, 82, 0.12);
  --shadow-header: 0 1px 0 rgba(17, 17, 17, 0.06), 0 8px 24px rgba(17, 17, 17, 0.04);
  --shadow-menu: 0 12px 24px rgba(17, 17, 17, 0.08);
  --shadow-device: 0 24px 48px rgba(8, 24, 51, 0.12), 0 0 0 1px rgba(8, 24, 51, 0.06);
  --shadow-m3-2: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-m3-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
  --focus-ring-color: var(--color-border-focus);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-halo: 0 0 0 4px rgba(41, 121, 255, 0.12);
  --state-hover: 0.08;
  --state-focus: 0.12;
  --state-pressed: 0.12;
  --state-disabled: 0.38;

  /* Motion */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-pop: cubic-bezier(0.3, 1.6, 0.5, 1);
  --motion-hover-duration: var(--duration-fast);
  --motion-hover-easing: ease-out;
  --motion-enter-duration: var(--duration-slower);
  --motion-enter-easing: var(--ease-standard);
  --motion-sheet-duration: var(--duration-slow);
  --motion-sheet-easing: var(--ease-emphasized);

  /* Layering and breakpoints */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 2;
  --z-nav: 20;
  --z-overlay: 10;
  --breakpoint-phone: 760px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1100px;
  --breakpoint-wide: 1300px;

  /* Components */
  --button-height: var(--size-control-md);
  --button-height-block: var(--size-control-lg);
  --button-padding-x: 22px;
  --button-radius: var(--radius-pill);
  --button-gap: var(--space-1);
  --button-primary-background: var(--color-action-primary-accessible);
  --button-primary-background-hover: var(--color-action-primary-pressed);
  --button-primary-text: var(--color-text-on-action);
  --button-secondary-background: var(--color-surface-page);
  --button-secondary-background-hover: var(--color-surface-hover);
  --button-secondary-text: var(--color-text-primary);
  --button-secondary-border: var(--color-border-strong);
  --icon-button-size-sm: var(--size-control-sm);
  --icon-button-size-md: var(--size-control-md);
  --icon-button-size-lg: var(--size-control-lg);
  --icon-button-radius: var(--radius-circle);
  --icon-button-color: var(--color-text-muted);
  --icon-button-background-hover: var(--color-surface-card);
  --searchbar-height: var(--size-control-md);
  --searchbar-height-lg: var(--size-control-lg);
  --searchbar-radius: var(--radius-pill);
  --searchbar-border: var(--color-border-input);
  --searchbar-border-focus: var(--color-border-focus);
  --searchbar-placeholder: var(--color-text-muted);
  --card-background: var(--color-surface-card);
  --card-radius: var(--radius-xl);
  --card-padding: var(--space-8);
  --card-padding-compact: var(--space-6);
  --chip-radius: var(--radius-sm);
  --chip-border: var(--color-border-brand);
  --chip-background-from: var(--color-surface-chip-from);
  --chip-background-to: var(--color-surface-chip-to);
  --sheet-radius-top: var(--radius-xl);
  --sheet-background: var(--color-surface-page);
  --sheet-shadow: var(--shadow-m3-3);
  --avatar-size: var(--size-control-md);
  --avatar-size-sm: var(--size-control-sm);
  --avatar-background: var(--color-text-brand);
  --avatar-text: var(--color-text-on-action);
}