/**
 * ml-tokens.css — GENERATED. Do not edit.
 *
 * Source:    frontend/guide/tokens/tokens.json  (v9.0.0)
 * Regenerate: node scripts/build-tokens.mjs
 *
 * 111 tokens, ceiling 111. The previous hand-maintained system
 * had reached 248 custom properties in a single :root, of which every value
 * past the 4-step core was an exact duplicate under a second name.
 *
 * Palette rule: the chrome is monochrome, the media carries all the colour.
 * Light only — dark mode is deliberately not built.
 */
:root {

  /* Colour — monochrome chrome; media carries all saturation */
  --color-ink: #0D0D0D; /* Primary action AND primary text */
  --color-paper: #FCFCFD; /* App canvas / page background */
  --color-white: #FFFFFF; /* Card and sheet fill */
  --color-surface: #F8F8FB; /* Subtle raised/sunken fill — search bars, inactive segments, skeletons */
  --color-line: #D5D5DE; /* Hairline borders, dividers, list separators */
  --color-muted: #66666F; /* Secondary text, metadata, placeholder */
  --color-pink: #EA4C89;
  --color-pink-pressed: #C7295F; /* Two jobs, one token */
  --color-pink-container: #FCE7F3; /* The one permitted tinted surface — accent chips, progress tracks */
  --color-ink-pressed: #2B2B2B;
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #DC2626;
  --color-brand-warm-pink: #FF005C; /* Brand pink */
  --color-brand-black: #141621; /* Brand black, faintly blue */
  --color-brand-white: #FFFFFF;
  --color-brand-dark-gray: #4F5059; /* EXPRESSION ONLY — never on a product screen */
  --color-brand-light-gray: #C4C5C8; /* EXPRESSION ONLY — never on a product screen */
  --color-info: #2563EB; /* Informational badge — 'On Tour', 'Remote available' */
  --color-disabled: #9CA3AF; /* Inactive control borders and text */
  --color-scrim: rgba(13,13,13,0.32); /* Backdrop behind drawers, sheets and modals */
  --color-purple: #8B5CF6; /* BADGES ONLY */

  /* Spacing — 4-step exponential (r=2) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 32px;

  /* Radius */
  --radius-1: 8px;
  --radius-2: 16px;
  --radius-3: 32px;
  --radius-4: 9999px;

  /* Size — control heights; 3 = 48dp touch minimum, 4 = 56dp comfortable */
  --size-1: 32px;
  --size-2: 40px;
  --size-3: 48px;
  --size-4: 56px;

  /* Icon — 4 optical sizes; 16 and 24 are the library's drawn grids */
  --icon-1: 16px;
  --icon-2: 20px; /* Default UI icon — buttons, fields, list rows, menu items */
  --icon-3: 24px; /* Navigation and primary actions; the native grid of the other 398 glyphs */
  --icon-4: 32px; /* Large — empty states, feature discs, illustration-scale marks */

  /* Avatar — 4 sizes; NOT --size-*, an avatar is not a control */
  --avatar-1: 24px; /* Facepile / stacked collaborators, inline byline */
  --avatar-2: 32px; /* List rows, comment threads, chat list */
  --avatar-3: 48px; /* Card headers, message bubbles, seller row */
  --avatar-4: 64px; /* Profile header, booking confirmation, hero */

  /* Border width — 0/1/2dp; zero needs no token */
  --border-1: 1px; /* Subtle — hairline card borders, dividers, list separators, input rest */
  --border-2: 2px; /* Prominent — focus ring, selected card or chip, featured tier */

  /* Opacity */
  --opacity-1: 0.08;
  --opacity-2: 0.16;
  --opacity-3: 0.32;
  --opacity-4: 0.64;

  /* Font weight — 400/500/600/800; there is deliberately no 700 step */
  --weight-1: 400; /* Body copy, running text */
  --weight-2: 500; /* Medium — list titles, secondary labels */
  --weight-3: 600; /* Semibold — the system's emphasis weight */
  --weight-4: 800; /* Display only — hero headlines and the one big number on a screen */

  /* Type — fluid clamp() on web; native uses the sp/Dynamic Type ramp in tokens.json */
  --type-1: clamp(12px, calc(12px + 1 * (100vw - 360px) / 1080), 13px);
  --type-2: clamp(14px, calc(14px + 1 * (100vw - 360px) / 1080), 15px);
  --type-3: clamp(16px, calc(16px + 2 * (100vw - 360px) / 1080), 18px);
  --type-4: clamp(22px, calc(22px + 6 * (100vw - 360px) / 1080), 28px);
  --type-5: clamp(28px, calc(28px + 8 * (100vw - 360px) / 1080), 36px);
  --type-6: clamp(32px, calc(32px + 12 * (100vw - 360px) / 1080), 44px);
  --type-7: clamp(40px, calc(40px + 16 * (100vw - 360px) / 1080), 56px);

  /* Font families */
  --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-eyebrow: 'Unica One', 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Elevation — 2 levels only; prefer a hairline border to a shadow */
  --elevation-1: 0 1px 3px rgba(13,11,38,0.08);
  --elevation-2: 0 4px 12px rgba(13,11,38,0.05);
  --elevation-3: 0 8px 24px rgba(13,11,38,0.08);
  --elevation-4: 0 12px 32px rgba(13,11,38,0.12);

  /* Motion — web duration + easing; native springs live in tokens.json */
  --duration-1: 125ms;
  --duration-2: 200ms;
  --duration-3: 320ms;
  --duration-4: 500ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-spring: cubic-bezier(0, 0.35, 0, 1.25);

  /* Z-index — web only */
  --z-1: 100;
  --z-2: 200;
  --z-3: 400;
  --z-4: 800;

  /* Layout — page constraints; gutters and gaps map onto --space-* */
  --layout-max: 1440px; /* Page max-width at the widest layout */
  --layout-measure: 64ch; /* Maximum readable line length for body prose */

  /* Component — dimensions fixed by a platform contract, not by us */
  --component-appbar-search: 56px; /* Search app bar — the spec's 56dp variant */
  --component-appbar-center: 64px; /* Center-aligned app bar, generic screens */
  --component-appbar-medium: 112px; /* Medium app bar, section headers */
  --component-appbar-large: 152px; /* Large app bar, profile pages and dashboard */
  --component-drawer-modal: 360px; /* Modal navigation drawer — mobile hamburger menu */
  --component-drawer-persistent: 240px; /* Persistent drawer — desktop sidebar */
  --component-nav-rail: 80px; /* Navigation rail, tablet only, 3-7 destinations */
  --component-switch-track: 52px; /* Material 3 switch track width */

  /* Gesture and interaction thresholds */
  --gesture-swipe-threshold: 80px;
  --gesture-drag-threshold: 8px; /* Movement before a drag is recognised over a tap */
  --gesture-long-press: 500ms; /* Long-press recognition delay */
  --gesture-pinch-min: 0.5; /* Minimum pinch-zoom scale — artwork and waveform detail views */
  --gesture-pinch-max: 3; /* Maximum pinch-zoom scale */
  --gesture-tooltip-delay: 400ms; /* Hover dwell before a tooltip opens */

  /* Media — the palette rule, made operational */
  --media-scrim: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
  --media-aspect-square: 1/1;
  --media-aspect-wide: 16/9;
  --media-aspect-card: 4/3;

  /* Status — derived pairs, named once instead of mixed inline */
  --status-error-bg: color-mix(in srgb, var(--color-error) 12%, var(--color-white)); /* Rejected, failed, destructive — container fill */
  --status-error-text: color-mix(in srgb, var(--color-error) 72%, black); /* Rejected, failed, destructive — text/icon on that fill */
  --status-success-bg: color-mix(in srgb, var(--color-success) 14%, var(--color-white)); /* Confirmed, available, complete — container fill */
  --status-success-text: color-mix(in srgb, var(--color-success) 58%, black); /* Confirmed, available, complete — text/icon on that fill */
  --status-warning-bg: color-mix(in srgb, var(--color-warning) 18%, var(--color-white)); /* Pending, caution — container fill */
  --status-warning-text: color-mix(in srgb, var(--color-warning) 50%, black); /* Pending, caution — text/icon on that fill */
  --status-category-bg: color-mix(in srgb, var(--color-purple) 12%, var(--color-white)); /* CATEGORY badge container — purple */
  --status-category-text: color-mix(in srgb, var(--color-purple) 72%, black); /* Category badge text/icon on that fill */

  /* Safe area — edge-to-edge is mandatory, not optional */
  --safe-top: env(safe-area-inset-top, var(--chrome-status-bar));
  --safe-bottom: env(safe-area-inset-bottom, 16px);

  /* System chrome — space we reserve but do not draw */
  --chrome-status-bar: 24px; /* Status bar height fallback */
  --chrome-scrollbar: 12px; /* Desktop scrollbar width */

  /* Window size classes — Material WindowSizeClass, what Compose branches on */
  --bp-medium: 600px; /* ≥600dp — large phone landscape, small tablet, unfolded inner display */
  --bp-expanded: 840px; /* ≥840dp — tablet, desktop */
}

.ml-type-1 {
  font-family: var(--font-body);
  font-size: var(--type-1);
  font-weight: var(--weight-3);
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.ml-type-2 {
  font-family: var(--font-body);
  font-size: var(--type-2);
  font-weight: var(--weight-1);
  line-height: 1.45;
  letter-spacing: 0;
}
.ml-type-3 {
  font-family: var(--font-body);
  font-size: var(--type-3);
  font-weight: var(--weight-1);
  line-height: 1.5;
  letter-spacing: 0;
}
.ml-type-4 {
  font-family: var(--font-display);
  font-size: var(--type-4);
  font-weight: var(--weight-3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ml-type-5 {
  font-family: var(--font-display);
  font-size: var(--type-5);
  font-weight: var(--weight-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.ml-type-6 {
  font-family: var(--font-display);
  font-size: var(--type-6);
  font-weight: var(--weight-4);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.ml-type-7 {
  font-family: var(--font-display);
  font-size: var(--type-7);
  font-weight: var(--weight-4);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

/* Media at or above 600px is Material's Medium window size class;
   840px is Expanded. These are the only two breakpoints —
   they match what Compose branches on, so web and native stay in agreement. */