/* Doctovis - Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --color-teal-950: #013331; /* Deepest teal; darkest brand shade. 13.8:1 on white and 13.0:1 on surface-page: safe for text on both. */
  --color-teal-900: #004d4f; /* Deep teal — the wordmark colour of the Doctovis logotype. 9.7:1 on white and 9.1:1 on surface-page: safe for text on both. */
  --color-teal-800: #005c58; /* Deep teal; status-active text. 7.9:1 on white and 7.4:1 on surface-page: safe for text on both. Used by status-active-fg. */
  --color-teal-700: #0a6f6a; /* Text-on-light brand teal and hover/pressed state: links, brand text, primary-button hover. 6.0:1 on white and 5.6:1 on surface-page: safe for text on both. Used by text-brand, text-link, surface-brand-strong, feedback-info-fg, status-accepted-fg, status-enroute-fg. */
  --color-teal-600: #0e8c86; /* Primary action: filled buttons and selected controls (surface-brand). 4.1:1 on white: large text (3:1) and graphics only, not body text. Used by surface-brand, status-active-dot. */
  --color-teal-500: #00b8b2; /* Primary brand teal: logo mark, brand fills and dots; the surface-brand fill in the dark theme. 2.5:1 on white: fills, borders and illustration only, not text. Used by border-brand, status-enroute-dot, surface-brand. */
  --color-teal-400: #00c7c2; /* Accent turquoise: highlights and the i-dot of the wordmark; brand text in the dark theme. 2.1:1 on white: fills, borders and illustration only, not text. Used by status-accepted-dot, text-brand, text-link, surface-brand-strong, border-brand. */
  --color-teal-300: #57cbc4; /* Mid brand tint: outlined-button borders and dark-theme feedback text. 2.0:1 on white: fills, borders and illustration only, not text. Used by status-active-border, feedback-info-fg, status-accepted-fg, status-enroute-fg. */
  --color-teal-200: #93ded9; /* Light brand tint for borders. 1.5:1 on white: fills, borders and illustration only, not text. Used by status-enroute-border, status-active-fg. */
  --color-teal-100: #c2ece9; /* Pale brand tint for active-status fills and info borders. 1.3:1 on white: fills, borders and illustration only, not text. Used by feedback-info-border, status-accepted-border, status-active-bg. */
  --color-teal-50: #e3f6f4; /* Pale brand surface: en-route status fill, muted brand backgrounds. 1.1:1 on white: fills, borders and illustration only, not text. Used by surface-brand-muted, status-enroute-bg. */
  --color-teal-25: #f1fbfa; /* Lightest brand tint: subtle brand surfaces, info and accepted fills. 1.1:1 on white: fills, borders and illustration only, not text. Used by surface-brand-subtle, feedback-info-bg, status-accepted-bg. */
  --color-navy-950: #0a1830; /* Deepest navy. 17.7:1 on white and 16.6:1 on surface-page: safe for text on both. */
  --color-navy-900: #0e2344; /* Deep navy; the dark theme's text-inverse. 15.6:1 on white and 14.7:1 on surface-page: safe for text on both. Used by text-inverse. */
  --color-navy-800: #102a4c; /* Primary text ink: headings and body copy (text-primary), and the deep surface. 14.4:1 on white and 13.5:1 on surface-page: safe for text on both. Used by text-primary, surface-deep. */
  --color-navy-700: #133b6b; /* Brand navy. 11.3:1 on white and 10.6:1 on surface-page: safe for text on both. */
  --color-navy-600: #294f7e; /* Mid navy for illustration and secondary graphics. 8.4:1 on white and 7.8:1 on surface-page: safe for text on both. */
  --color-navy-500: #436594; /* Mid navy for illustration and secondary graphics. 6.0:1 on white and 5.6:1 on surface-page: safe for text on both. */
  --color-navy-400: #6f8ab0; /* Light navy for illustration and secondary graphics. 3.5:1 on white: large text (3:1) and graphics only, not body text. */
  --color-navy-300: #9fb2cd; /* Soft navy tint for illustration and borders on dark navy fills. 2.2:1 on white: fills, borders and illustration only, not text. */
  --color-navy-200: #c7d3e3; /* Pale navy tint; text on dark navy fills. 1.5:1 on white: fills, borders and illustration only, not text. */
  --color-navy-100: #e1e8f1; /* Very pale navy tint. 1.2:1 on white: fills, borders and illustration only, not text. */
  --color-navy-50: #f1f5fa; /* Palest navy tint. 1.1:1 on white: fills, borders and illustration only, not text. */
  --color-coral-950: #5a1b0c; /* Deepest coral. 13.2:1 on white and 12.3:1 on surface-page: safe for text on both. */
  --color-coral-900: #7c2912; /* Deep coral. 9.6:1 on white and 9.0:1 on surface-page: safe for text on both. */
  --color-coral-800: #99371b; /* Dark coral. 7.2:1 on white and 6.8:1 on surface-page: safe for text on both. */
  --color-coral-700: #b23d24; /* Coral for text: accent and warning text, pending-status text. Never for icons. 5.9:1 on white and 5.5:1 on surface-page: safe for text on both. Used by text-accent, text-warning, feedback-warning-fg, status-pending-fg. */
  --color-coral-600: #e25b3a; /* Strong coral, for emphasis marks. Never for icons. 3.6:1 on white: large text (3:1) and graphics only, not body text. */
  --color-coral-500: #ff7a5c; /* Warm accent anchor: pending-status dot, accent surface and border. Status and highlights only — never for icons. 2.6:1 on white: fills, borders and illustration only, not text. Used by surface-accent, border-accent, status-pending-dot. */
  --color-coral-400: #ff9579; /* Coral for text in the dark theme. Never for icons. 2.1:1 on white: fills, borders and illustration only, not text. Used by text-accent, text-warning, border-accent, feedback-warning-fg. */
  --color-coral-300: #ffb4a0; /* Soft coral; pending-status text in the dark theme. 1.7:1 on white: fills, borders and illustration only, not text. Used by status-pending-fg. */
  --color-coral-200: #ffd2c6; /* Coral tint for warning borders. 1.4:1 on white: fills, borders and illustration only, not text. Used by feedback-warning-border, status-pending-border. */
  --color-coral-100: #ffe9e3; /* Pale coral tint. 1.2:1 on white: fills, borders and illustration only, not text. */
  --color-coral-50: #fff4f0; /* Pale coral fill: pending status and warning feedback. 1.1:1 on white: fills, borders and illustration only, not text. Used by surface-accent-subtle, feedback-warning-bg, status-pending-bg. */
  --color-coral-25: #fffaf8; /* Lightest coral tint. 1.0:1 on white: fills, borders and illustration only, not text. */
  --color-green-800: #105938; /* Deep green. 8.4:1 on white and 7.9:1 on surface-page: safe for text on both. */
  --color-green-700: #15795b; /* Green for text: success and completed-status text; verified marks. 5.4:1 on white and 5.0:1 on surface-page: safe for text on both. Used by text-success, feedback-success-fg, status-completed-fg. */
  --color-green-600: #18926b; /* Strong green for success marks. 3.9:1 on white: large text (3:1) and graphics only, not body text. */
  --color-green-500: #21b883; /* Success border and completed-status dot. 2.5:1 on white: fills, borders and illustration only, not text. Used by border-success, status-completed-dot. */
  --color-green-400: #4fd0a0; /* Green for text in the dark theme. 1.9:1 on white: fills, borders and illustration only, not text. Used by text-success, feedback-success-fg, status-completed-fg. */
  --color-green-200: #b6ebd7; /* Green tint for success borders. 1.3:1 on white: fills, borders and illustration only, not text. Used by feedback-success-border, status-completed-border. */
  --color-green-100: #d6f5e8; /* Pale green tint. 1.2:1 on white: fills, borders and illustration only, not text. */
  --color-green-50: #ecfbf4; /* Pale green fill: success feedback and completed status. 1.1:1 on white: fills, borders and illustration only, not text. Used by feedback-success-bg, status-completed-bg. */
  --color-red-800: #8e1b1b; /* Deep red; danger-button hover. 9.0:1 on white and 8.5:1 on surface-page: safe for text on both. */
  --color-red-700: #b31e1e; /* Red for text: error and cancelled-status text. 6.7:1 on white and 6.3:1 on surface-page: safe for text on both. Used by text-error, feedback-error-fg, status-cancelled-fg. */
  --color-red-600: #dc2f2f; /* Danger action fill. 4.7:1 on white: large text (3:1) and graphics only, not body text. */
  --color-red-500: #ef4848; /* Error border and cancelled-status dot. 3.7:1 on white: large text (3:1) and graphics only, not body text. Used by border-error, status-cancelled-dot. */
  --color-red-200: #fbcbcb; /* Red tint for error borders. 1.4:1 on white: fills, borders and illustration only, not text. Used by feedback-error-border, status-cancelled-border. */
  --color-red-100: #fce0e0; /* Pale red tint. 1.2:1 on white: fills, borders and illustration only, not text. */
  --color-red-50: #fef1f1; /* Pale red fill: error feedback and cancelled status. 1.1:1 on white: fills, borders and illustration only, not text. Used by feedback-error-bg, status-cancelled-bg. */
  --color-neutral-950: #0b1622; /* Deepest navy-cool neutral. 18.2:1 on white and 17.1:1 on surface-page: safe for text on both. */
  --color-neutral-900: #14233a; /* Deep navy-cool neutral. 15.8:1 on white and 14.8:1 on surface-page: safe for text on both. */
  --color-neutral-800: #243348; /* Dark navy-cool neutral. 12.8:1 on white and 12.0:1 on surface-page: safe for text on both. */
  --color-neutral-700: #3a4a60; /* Body copy variant on light grounds. 9.0:1 on white and 8.5:1 on surface-page: safe for text on both. */
  --color-neutral-600: #5e7088; /* Secondary text (text-secondary). 5.1:1 on white and 4.7:1 on surface-page: safe for text on both. Used by text-secondary, status-noshow-fg. */
  --color-neutral-500: #788aa0; /* Mid neutral; caption colour in the Flutter text styles. 3.5:1 on white: large text (3:1) and graphics only, not body text. */
  --color-neutral-400: #9dabbe; /* Light neutral: tertiary text, no-show dot. 2.3:1 on white: fills, borders and illustration only, not text. Used by text-tertiary, status-noshow-dot, status-noshow-fg. */
  --color-neutral-300: #bfc9d8; /* Border-strong and disabled text. 1.7:1 on white: fills, borders and illustration only, not text. Used by text-disabled, border-strong. */
  --color-neutral-200: #dce3ec; /* Default border. 1.3:1 on white: fills, borders and illustration only, not text. Used by border-default, status-noshow-border. */
  --color-neutral-100: #e9eef4; /* Subtle border. 1.2:1 on white: fills, borders and illustration only, not text. Used by border-subtle. */
  --color-neutral-50: #f4f7fb; /* Sunken surface and no-show fill. 1.1:1 on white: fills, borders and illustration only, not text. Used by surface-sunken, status-noshow-bg. */
  --color-neutral-25: #f8fbfc; /* Lightest navy-cool neutral. 1.0:1 on white: fills, borders and illustration only, not text. */
  --color-white: #ffffff; /* Pure white: cards and elevated surfaces; text on dark fills.  Used by text-inverse, surface-card, surface-elevated. */
  --color-black: #000000; /* Pure black; not used by the UI. */
  --text-primary: var(--color-navy-800); /* Headings and body copy on every surface (surface-page, surface-card, surface-elevated, surface-sunken). 12.9–14.4:1 light, 10.8–15.6:1 dark. */
  --text-secondary: var(--color-neutral-700); /* Secondary text and metadata. Light: neutral-700, 8.4–9.0:1 on surface-page, surface-card, surface-sunken and the brand tints (lifted from neutral-600 on 2026-07-06 after physical-device reviews). Dark: 5.6–8.1:1 on every dark surface. */
  --text-tertiary: var(--color-neutral-500); /* Timestamps, placeholders and other non-essential hints. Light: neutral-500, 3.3–3.5:1, so 3:1 for large text and UI only; dark: 3.1–4.5:1. Never for text a reader must read: use text-secondary. */
  --text-disabled: var(--color-neutral-300); /* Disabled labels only (exempt from contrast minimums: 1.5–1.7:1 light, 1.8–2.6:1 dark). */
  --text-inverse: var(--color-white); /* Text and icons on surface-brand and surface-brand-strong fills. Light: white on teal-600, 4.1:1 — misses 4.5:1 for normal-size text, passes 3:1 for text of 24px or larger or bold 19px or larger; kept exact. Dark: navy-900 on teal-500, 6.3:1. On surface-deep it reads only in the light theme (14.4:1); in the dark theme surface-deep is a dark surface, so use text-primary there. */
  --text-brand: var(--color-teal-700); /* Brand-coloured text and active labels, on surface-page, surface-card, surface-sunken, surface-brand-subtle and surface-brand-muted (light) and on surface-page, surface-card, surface-elevated and surface-sunken (dark). 5.4–6.0:1 light, 5.9–8.5:1 dark. */
  --text-accent: var(--color-coral-700); /* Accent text (coral), on surface-page, surface-card, surface-sunken, surface-brand-subtle and surface-brand-muted (light) and on surface-page, surface-card, surface-elevated and surface-sunken (dark). 5.2–5.9:1 light, 5.8–8.4:1 dark. Never used for icons. */
  --text-success: var(--color-green-700); /* Success text, on surface-page, surface-card, surface-sunken, surface-brand-subtle and surface-brand-muted (light) and on surface-page, surface-card, surface-elevated and surface-sunken (dark). 4.8–5.4:1 light, 6.4–9.3:1 dark. */
  --text-warning: var(--color-coral-700); /* Warning text (coral), on surface-page, surface-card, surface-sunken, surface-brand-subtle and surface-brand-muted (light) and on surface-page, surface-card, surface-elevated and surface-sunken (dark). 5.2–5.9:1 light, 5.8–8.4:1 dark. Never used for icons. */
  --text-error: var(--color-red-700); /* Error text, on surface-page, surface-card, surface-sunken, surface-brand-subtle and surface-brand-muted (light) and on surface-page, surface-card, surface-elevated and surface-sunken (dark). 6.0–6.7:1 light, 5.4–7.8:1 dark. */
  --text-link: var(--color-teal-700); /* Links, on surface-page, surface-card, surface-sunken, surface-brand-subtle and surface-brand-muted (light) and on surface-page, surface-card, surface-elevated and surface-sunken (dark). 5.4–6.0:1 light, 5.9–8.5:1 dark. */
  --surface-page: #f5f8fb; /* Page background: a cool off-white, slightly navy-tinted in the light theme; deep teal-navy (never pure black) in the dark theme. Hosts text-primary, text-secondary and text-brand. */
  --surface-card: var(--color-white); /* Card background: pure white in the light theme, deep teal in the dark theme. Hosts the same text tokens as surface-page. */
  --surface-elevated: var(--color-white); /* Popovers, sheets and other raised layers: white in the light theme, a lighter deep teal in the dark theme. Text: text-primary, text-secondary, text-brand. */
  --surface-sunken: var(--color-neutral-50); /* Recessed areas such as wells and no-show fills. Text: text-primary, text-secondary, text-brand. */
  --surface-overlay: rgba(10, 24, 48, 0.55); /* Modal and sheet backdrop scrim; sits under surface-elevated layers, no text on it. */
  --surface-brand: var(--color-teal-600); /* Primary brand fill (teal-600 in the light theme, teal-500 in the dark). Text and icons on it: text-inverse. */
  --surface-brand-strong: var(--color-teal-700); /* Hover and pressed brand fill. Text and icons on it: text-inverse. */
  --surface-brand-subtle: var(--color-teal-25); /* Lightest brand tint behind brand text, e.g. a focused input or a hovered ghost action. Text: text-brand, text-primary. */
  --surface-brand-muted: var(--color-teal-50); /* Muted brand tint behind brand text. Text: text-brand, text-primary. */
  --surface-deep: var(--color-navy-800); /* Deep navy surface in the light theme; in the dark theme it is the same colour as surface-card. Text on it: text-inverse in the light theme only. */
  --surface-accent: var(--color-coral-500); /* Coral accent fill for status and highlight moments only; never for icons. */
  --surface-accent-subtle: var(--color-coral-50); /* Pale coral tint behind accent text. Text: text-accent. */
  --border-subtle: var(--color-neutral-100); /* Hairline between list items and card edges, a decorative separator (1.2:1 on surface-card). */
  --border-default: var(--color-neutral-200); /* Default dividers (1.3:1 on surface-card in the light theme). As sourced it misses 3:1 for a control border; pair a field with a visible label. */
  --border-strong: var(--color-neutral-300); /* Stronger dividers and outlines (1.7:1 on surface-card in the light theme). */
  --border-brand: var(--color-teal-500); /* Brand border for focus and selected states (2.5:1 on surface-card in the light theme, 6.9:1 in dark; the light value misses 3:1 as sourced). */
  --border-accent: var(--color-coral-500); /* Coral accent border for status and highlights. */
  --border-error: var(--color-red-500); /* Error border (3.7:1 on surface-card in the light theme, 3.9:1 in dark). */
  --border-success: var(--color-green-500); /* Success border (2.6:1 on surface-card in the light theme, 5.7:1 in dark). */
  --feedback-success-bg: var(--color-green-50); /* Success banner or toast fill, behind feedback-success-fg. */
  --feedback-success-fg: var(--color-green-700); /* Success text and icon on feedback-success-bg: 5.0:1 light, 5.9:1 dark. */
  --feedback-success-border: var(--color-green-200); /* Success banner border. Decorative; the message text carries the meaning. */
  --feedback-warning-bg: var(--color-coral-50); /* Warning banner or toast fill, behind feedback-warning-fg. */
  --feedback-warning-fg: var(--color-coral-700); /* Warning text and icon on feedback-warning-bg: 5.4:1 light, 5.6:1 dark. */
  --feedback-warning-border: var(--color-coral-200); /* Warning banner border. Decorative; the message text carries the meaning. */
  --feedback-error-bg: var(--color-red-50); /* Error banner or toast fill, behind feedback-error-fg. */
  --feedback-error-fg: var(--color-red-700); /* Error text and icon on feedback-error-bg: 6.1:1 light, 6.0:1 dark. */
  --feedback-error-border: var(--color-red-200); /* Error banner border. Decorative; the message text carries the meaning. */
  --feedback-info-bg: var(--color-teal-25); /* Info banner or toast fill, behind feedback-info-fg. */
  --feedback-info-fg: var(--color-teal-700); /* Info text and icon on feedback-info-bg: 5.7:1 light, 5.7:1 dark. */
  --feedback-info-border: var(--color-teal-100); /* Info banner border. Decorative; the message text carries the meaning. */
  --status-pending-bg: var(--color-coral-50); /* Badge fill for the “En attente” consultation status, behind status-pending-fg. */
  --status-pending-fg: var(--color-coral-700); /* Badge text for “En attente” on status-pending-bg: 5.4:1 light, 7.0:1 dark. */
  --status-pending-border: var(--color-coral-200); /* Badge border for “En attente”. Decorative; the label carries the meaning. */
  --status-pending-dot: var(--color-coral-500); /* Dot beside the “En attente” label. Never the only signal: always shown with the status label. */
  --status-accepted-bg: var(--color-teal-25); /* Badge fill for the “Acceptée” consultation status, behind status-accepted-fg. */
  --status-accepted-fg: var(--color-teal-700); /* Badge text for “Acceptée” on status-accepted-bg: 5.7:1 light, 5.9:1 dark. */
  --status-accepted-border: var(--color-teal-100); /* Badge border for “Acceptée”. Decorative; the label carries the meaning. */
  --status-accepted-dot: var(--color-teal-400); /* Dot beside the “Acceptée” label. Never the only signal: always shown with the status label. */
  --status-enroute-bg: var(--color-teal-50); /* Badge fill for the “En route” consultation status, behind status-enroute-fg. */
  --status-enroute-fg: var(--color-teal-700); /* Badge text for “En route” on status-enroute-bg: 5.4:1 light, 5.6:1 dark. */
  --status-enroute-border: var(--color-teal-200); /* Badge border for “En route”. Decorative; the label carries the meaning. */
  --status-enroute-dot: var(--color-teal-500); /* Dot beside the “En route” label. Never the only signal: always shown with the status label. */
  --status-active-bg: var(--color-teal-100); /* Badge fill for the “En cours” consultation status, behind status-active-fg. */
  --status-active-fg: var(--color-teal-800); /* Badge text for “En cours” on status-active-bg: 6.2:1 light, 6.4:1 dark. */
  --status-active-border: var(--color-teal-300); /* Badge border for “En cours”. Decorative; the label carries the meaning. */
  --status-active-dot: var(--color-teal-600); /* Dot beside the “En cours” label. Never the only signal: always shown with the status label. */
  --status-completed-bg: var(--color-green-50); /* Badge fill for the “Clôturée” consultation status, behind status-completed-fg. */
  --status-completed-fg: var(--color-green-700); /* Badge text for “Clôturée” on status-completed-bg: 5.0:1 light, 5.9:1 dark. */
  --status-completed-border: var(--color-green-200); /* Badge border for “Clôturée”. Decorative; the label carries the meaning. */
  --status-completed-dot: var(--color-green-500); /* Dot beside the “Clôturée” label. Never the only signal: always shown with the status label. */
  --status-cancelled-bg: var(--color-red-50); /* Badge fill for the “Annulée” consultation status, behind status-cancelled-fg. */
  --status-cancelled-fg: var(--color-red-700); /* Badge text for “Annulée” on status-cancelled-bg: 6.1:1 light, 6.0:1 dark. */
  --status-cancelled-border: var(--color-red-200); /* Badge border for “Annulée”. Decorative; the label carries the meaning. */
  --status-cancelled-dot: var(--color-red-500); /* Dot beside the “Annulée” label. Never the only signal: always shown with the status label. */
  --status-noshow-bg: var(--color-neutral-50); /* Badge fill for the “Absent” consultation status, behind status-noshow-fg. */
  --status-noshow-fg: var(--color-neutral-600); /* Badge text for “Absent” on status-noshow-bg: 4.7:1 light, 5.2:1 dark. */
  --status-noshow-border: var(--color-neutral-200); /* Badge border for “Absent”. Decorative; the label carries the meaning. */
  --status-noshow-dot: var(--color-neutral-400); /* Dot beside the “Absent” label. Never the only signal: always shown with the status label. */
  --shadow-xs: 0 1px 2px rgba(16, 42, 76, 0.06); /* Subtle lift on list items. */
  --shadow-sm: 0 1px 3px rgba(16, 42, 76, 0.08), 0 1px 2px rgba(16, 42, 76, 0.05); /* Cards at rest. */
  --shadow-md: 0 6px 16px -8px rgba(16, 42, 76, 0.18), 0 2px 6px rgba(16, 42, 76, 0.06); /* Cards on hover and popovers. */
  --shadow-lg: 0 14px 32px -16px rgba(16, 42, 76, 0.24), 0 4px 10px rgba(16, 42, 76, 0.07); /* Bottom sheets and modals. */
  --shadow-xl: 0 24px 56px -22px rgba(16, 42, 76, 0.30), 0 8px 18px rgba(16, 42, 76, 0.08); /* Full-screen modals. */
  --shadow-teal: 0 10px 24px -10px rgba(14, 140, 134, 0.45); /* Teal glow under the primary call-to-action on hover. */
}
[data-theme="dark"] {
  --text-primary: #e7f1f0;
  --text-secondary: #9db2b6;
  --text-tertiary: #6b8388;
  --text-disabled: #495c61;
  --text-inverse: var(--color-navy-900);
  --text-brand: var(--color-teal-400);
  --text-accent: var(--color-coral-400);
  --text-success: var(--color-green-400);
  --text-warning: var(--color-coral-400);
  --text-error: #fc8a8a;
  --text-link: var(--color-teal-400);
  --surface-page: #07211f;
  --surface-card: #0e2e2b;
  --surface-elevated: #143a36;
  --surface-sunken: #051a18;
  --surface-overlay: rgba(0, 18, 16, 0.72);
  --surface-brand: var(--color-teal-500);
  --surface-brand-strong: var(--color-teal-400);
  --surface-brand-subtle: rgba(0, 184, 178, 0.16);
  --surface-brand-muted: rgba(0, 184, 178, 0.10);
  --surface-deep: #0e2e2b;
  --surface-accent: var(--color-coral-500);
  --surface-accent-subtle: rgba(255, 122, 92, 0.14);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-brand: var(--color-teal-400);
  --border-accent: var(--color-coral-400);
  --border-error: var(--color-red-500);
  --border-success: var(--color-green-500);
  --feedback-success-bg: rgba(33, 184, 131, 0.14);
  --feedback-success-fg: var(--color-green-400);
  --feedback-success-border: var(--color-green-200);
  --feedback-warning-bg: rgba(255, 122, 92, 0.14);
  --feedback-warning-fg: var(--color-coral-400);
  --feedback-warning-border: var(--color-coral-200);
  --feedback-error-bg: rgba(220, 47, 47, 0.14);
  --feedback-error-fg: #fc8a8a;
  --feedback-error-border: var(--color-red-200);
  --feedback-info-bg: rgba(0, 184, 178, 0.15);
  --feedback-info-fg: var(--color-teal-300);
  --feedback-info-border: var(--color-teal-100);
  --status-pending-bg: rgba(255, 122, 92, 0.14);
  --status-pending-fg: var(--color-coral-300);
  --status-pending-border: rgba(255, 122, 92, 0.26);
  --status-pending-dot: var(--color-coral-500);
  --status-accepted-bg: rgba(0, 184, 178, 0.13);
  --status-accepted-fg: var(--color-teal-300);
  --status-accepted-border: rgba(0, 184, 178, 0.26);
  --status-accepted-dot: var(--color-teal-400);
  --status-enroute-bg: rgba(0, 184, 178, 0.16);
  --status-enroute-fg: var(--color-teal-300);
  --status-enroute-border: rgba(0, 184, 178, 0.30);
  --status-enroute-dot: var(--color-teal-500);
  --status-active-bg: rgba(0, 184, 178, 0.22);
  --status-active-fg: var(--color-teal-200);
  --status-active-border: rgba(0, 184, 178, 0.34);
  --status-active-dot: var(--color-teal-600);
  --status-completed-bg: rgba(33, 184, 131, 0.14);
  --status-completed-fg: var(--color-green-400);
  --status-completed-border: rgba(33, 184, 131, 0.26);
  --status-completed-dot: var(--color-green-500);
  --status-cancelled-bg: rgba(220, 47, 47, 0.14);
  --status-cancelled-fg: #fc8a8a;
  --status-cancelled-border: rgba(220, 47, 47, 0.26);
  --status-cancelled-dot: var(--color-red-500);
  --status-noshow-bg: rgba(120, 138, 160, 0.14);
  --status-noshow-fg: var(--color-neutral-400);
  --status-noshow-border: rgba(120, 138, 160, 0.26);
  --status-noshow-dot: var(--color-neutral-400);
}
:root {
  --space-0: 0px; /* No space; resets a gap or margin. */
  --space-0-5: 2px; /* 2px hairline nudge. */
  --space-1: 4px; /* 4px base unit: tightest gap between inline pieces. */
  --space-1-5: 6px; /* 6px half-step between the 4px and 8px stops. */
  --space-2: 8px; /* 8px: gap between related items. */
  --space-2-5: 10px; /* 10px step between the 8px and 12px stops. */
  --space-3: 12px; /* 12px: lower bound of card padding (12–16px). */
  --space-4: 16px; /* 16px: screen margin on mobile and card padding (16–20px). */
  --space-5: 20px; /* 20px: upper bound of card padding. */
  --space-6: 24px; /* 24px: separation between sections; tablet page margin. */
  --space-7: 28px; /* 28px step between the 24px and 32px stops. */
  --space-8: 32px; /* 32px step on the 4px scale. */
  --space-10: 40px; /* 40px: desktop page margin. */
  --space-12: 48px; /* 48px step on the 4px scale. */
  --space-14: 56px; /* 56px step on the 4px scale. */
  --space-16: 64px; /* 64px step on the 4px scale. */
  --space-20: 80px; /* 80px step on the 4px scale. */
  --space-24: 96px; /* 96px step on the 4px scale. */
  --space-28: 112px; /* 112px step on the 4px scale. */
  --space-32: 128px; /* 128px: the largest step on the scale. */
  --radius-xs: 6px; /* Smallest corner radius (6px): inline marks and tight corners. */
  --radius-sm: 8px; /* Small corner radius (8px): small controls and swatches. */
  --radius-md: 10px; /* Chips and small controls (10px). */
  --radius-lg: 14px; /* Buttons and inputs (14px): soft rectangles, not pills. */
  --radius-xl: 18px; /* Cards in the components (18px); avatars for non-person images. */
  --radius-2xl: 22px; /* Large cards (22px). */
  --radius-3xl: 28px; /* Bottom sheets (top corners only) and modals (28px). */
  --radius-full: 9999px; /* Pill: badges and chips only. Person avatars are 50% circles. */
  --page-margin-mobile: 16px; /* Left and right page margin on mobile (16px, space-4). */
  --page-margin-tablet: 24px; /* Page margin on tablet (24px, space-6). */
  --page-margin-desktop: 40px; /* Page margin on desktop (40px, space-10). */
  --content-max-width: 1280px; /* Maximum content width on web surfaces (admin dashboard, marketing site). */
  --mobile-max-width: 430px; /* Maximum width of the mobile app column. */
  --touch-target-min: 44px; /* Minimum tap target for every control and icon button: 44px. */
  --bottom-nav-height: 72px; /* Height of the BottomNav bar; pad scrolling content by this much. */
  --header-height: 56px; /* Height of the app header bar. */
  --status-bar-height: 48px; /* Height reserved for the device status bar in the kit frames. */
  --font-size-2xs: 10px; /* 10px: decorative fragments only (badge counters, the FCFA sub-label). Never sentence text. */
  --font-size-xs: 13px; /* 13px: the readable floor; captions, metadata, nav labels, helper text, badges. */
  --font-size-sm: 15px; /* 15px: secondary body text, secondary buttons, chips. */
  --font-size-base: 17px; /* 17px: base body size and primary button text (iOS HIG body). */
  --font-size-md: 18px; /* 18px: list-item primaries and the app bar title (Inter 600). */
  --font-size-lg: 20px; /* 20px: card titles and section headers (Nunito, the smallest display size). */
  --font-size-xl: 24px; /* 24px: screen titles (Nunito) and the FCFA price display (Inter, tabular digits). */
  --font-size-2xl: 28px; /* 28px: sheet and modal headlines. */
  --font-size-3xl: 34px; /* 34px: large screen titles. */
  --font-size-4xl: 42px; /* 42px: hero headings. */
  --font-size-5xl: 54px; /* 54px: marketing display. */
  --font-size-6xl: 68px; /* 68px: largest marketing display. */
  --font-weight-regular: 400; /* 400: light body copy. */
  --font-weight-medium: 500; /* 500: captions. */
  --font-weight-semibold: 600; /* 600: body copy. */
  --font-weight-bold: 700; /* 700: titles and labels. */
  --font-weight-extrabold: 800; /* 800: headings and button text. */
  --font-weight-black: 900; /* 900: display headings. */
  --line-height-tight: 1.12; /* 1.12: display headings. */
  --line-height-snug: 1.25; /* 1.25: titles and headlines. */
  --line-height-normal: 1.45; /* 1.45: secondary body and captions. */
  --line-height-relaxed: 1.6; /* 1.6: long marketing paragraphs. App body copy runs at 1.5 (Inter has a tall x-height). */
  --line-height-loose: 1.75; /* 1.75: long-form reading. */
  --letter-spacing-tight: -0.02em; /* -0.02em: display headings and screen titles. */
  --letter-spacing-snug: -0.01em; /* -0.01em: button text and prices. */
  --letter-spacing-normal: 0em; /* 0: default tracking. */
  --letter-spacing-wide: 0.02em; /* 0.02em: small labels. */
  --letter-spacing-wider: 0.05em; /* 0.05em: uppercase micro-labels. */
  --letter-spacing-caps: 0.08em; /* 0.08em: all-caps labels. */
  --transition-fast: 100ms ease; /* Fastest state change (100ms). */
  --transition-default: 150ms ease; /* Hover transitions (150ms). */
  --transition-slow: 250ms ease; /* Slower state change (250ms). */
  --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Spring curve for press and release on interactive elements (scale 0.97). */
  --transition-enter: cubic-bezier(0.22, 1, 0.36, 1); /* Easing for sheets and modals sliding up and fading in (250ms). */
  --transition-exit: cubic-bezier(0.55, 0, 1, 0.45); /* Easing for exits, faster than enters (200ms). */
  --border-width: 1px; /* Default 1px border. */
  --border-width-thick: 1.5px; /* 1.5px border for outlined buttons and inputs. */
  --z-below: -1; /* Behind the page layer. */
  --z-base: 0; /* Normal flow. */
  --z-raised: 10; /* Slightly raised content. */
  --z-sticky: 20; /* Sticky headers and the fixed BottomNav. */
  --z-overlay: 30; /* Scrims behind drawers and modals. */
  --z-drawer: 40; /* Drawers and bottom sheets. */
  --z-modal: 50; /* Modals. */
  --z-toast: 60; /* Toasts above modals. */
  --z-tooltip: 70; /* Tooltips, the topmost layer. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Nunito", system-ui, -apple-system, sans-serif;
  --font-logo: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", "JetBrains Mono", "Consolas", monospace;
  --text-displayLarge: 800 42px/1.2 var(--font-display); /* Hero headings and marketing splash. Colour: text-primary. */
  --text-displayMedium: 800 34px/1.2 var(--font-display); /* Large screen titles. Colour: text-primary. */
  --text-displaySmall: 800 28px/1.2 var(--font-display); /* Modal and sheet headlines. Colour: text-primary. */
  --text-headlineMedium: 700 24px/1.25 var(--font-display); /* Screen-level H1, in the body under the app bar. Colour: text-primary. */
  --text-titleLarge: 700 20px/1.25 var(--font-display); /* Card titles and section names. Colour: text-primary. */
  --text-sectionHeader: 700 20px/1.25 var(--font-display); /* Section header above a list. Colour: text-primary. */
  --text-titleMedium: 600 18px/1.25 var(--font-sans); /* Sub-section labels and list-item primaries. Colour: text-primary. */
  --text-appBarTitle: 600 18px/1.2 var(--font-sans); /* App bar title (collapsed on scroll). Colour: text-primary. */
  --text-labelLarge: 600 17px/1.2 var(--font-sans); /* Primary button text. */
  --text-labelMedium: 600 15px/1.2 var(--font-sans); /* Secondary buttons and chip labels. */
  --text-labelSmall: 600 13px/1.2 var(--font-sans); /* Badge and status-pill text; tab overline. */
  --text-navLabel: 500 13px/1.2 var(--font-sans); /* Bottom navigation tab label; semibold 600 when active. */
  --text-bodyLarge: 400 17px/1.5 var(--font-sans); /* Primary readable body text. Colour: text-primary. */
  --text-bodyMedium: 500 15px/1.45 var(--font-sans); /* Secondary and supporting text. Colour: text-secondary. */
  --text-bodySmall: 500 13px/1.45 var(--font-sans); /* Captions and metadata. Colour: text-secondary. */
  --text-caption: 500 13px/1.45 var(--font-sans); /* Timestamps and small metadata. Colour: text-secondary. */
  --text-inputHelper: 400 13px/1.45 var(--font-sans); /* Helper and error text under inputs. Colour: text-secondary or text-error. */
  --text-micro: 500 10px/1.2 var(--font-sans); /* Decorative fragments only (badge counters, the FCFA sub-label). Colour: text-tertiary. */
  --text-price: 800 24px/1.2 var(--font-sans); /* FCFA price display; French space as thousands separator; tabular-nums. */
  --text-otp: 700 24px/1 var(--font-sans); /* OTP digit boxes; tabular-nums. */
  --text-rating: 600 13px/1.2 var(--font-sans); /* Star-rating value. Colour: text-accent. */
  --text-wordmark: 600 58px/0.9 var(--font-logo); /* The logotype as set in the logo lockup. Prefer the logo files in assets/Logos over re-typing it. */
  --text-wordmarkTagline: 500 19px/1.2 var(--font-logo); /* The tagline under the vertical logo lockup. */
}
.displayLarge {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.84px;
}
.displayMedium {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.68px;
}
.displaySmall {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.56px;
}
.headlineMedium {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.48px;
}
.titleLarge {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.sectionHeader {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
}
.titleMedium {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0;
}
.appBarTitle {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}
.labelLarge {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.labelMedium {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.labelSmall {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.navLabel {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.bodyLarge {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.bodyMedium {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0;
}
.bodySmall {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.inputHelper {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0.2px;
}
.micro {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.2px;
}
.price {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.48px;
}
.otp {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}
.rating {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.wordmark {
  font-family: var(--font-logo);
  font-size: 58px;
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.wordmarkTagline {
  font-family: var(--font-logo);
  font-size: 19px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.3px;
}