/* MyLyft design tokens — web. Source of truth: design/STYLE_GUIDE.md
   Import once at app root. Light is default; dark follows the OS unless
   data-theme is set on <html>. */

:root {
  /* Brand */
  --ml-primary: #0F7A6C;        /* route green */
  --ml-primary-hover: #0C6559;
  --ml-primary-active: #0A5349;
  --ml-primary-soft: #E3F3F0;   /* tints, selected rows, soft badges */
  --ml-on-primary: #FFFFFF;
  --ml-accent: #E9A227;         /* marigold: route highlight, driver mode, pending */
  --ml-accent-soft: #FBF0D6;
  --ml-on-accent: #2A1F05;

  /* Neutrals (warm stone) */
  --ml-bg: #F7F6F3;             /* page background */
  --ml-surface: #FFFFFF;        /* cards, panels, inputs */
  --ml-surface-2: #F1EFEA;      /* table header, hover rows, wells */
  --ml-border: #E4E1DA;
  --ml-border-strong: #CFCAC0;
  --ml-text: #1B2322;           /* primary text, green-black */
  --ml-text-2: #585F5E;         /* secondary text */
  --ml-text-3: #8A918F;         /* placeholders, hints */
  --ml-inverse: #1B2322;        /* dark surfaces in light mode (toasts) */
  --ml-on-inverse: #F7F6F3;

  /* Semantic */
  --ml-success: #1F8A4C;
  --ml-success-soft: #E2F3E8;
  --ml-warning: #B7791F;        /* text-safe marigold */
  --ml-warning-soft: #FBF0D6;
  --ml-danger: #C93B3B;
  --ml-danger-hover: #A82F2F;
  --ml-danger-soft: #FBE6E6;
  --ml-info: #2F6FDB;
  --ml-info-soft: #E5EDFB;

  /* Focus */
  --ml-focus: #0F7A6C;
  --ml-focus-ring: 0 0 0 3px rgba(15, 122, 108, 0.28);

  /* Type */
  --ml-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ml-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ml-text-xs: 12px;
  --ml-text-sm: 13px;
  --ml-text-base: 15px;
  --ml-text-md: 17px;
  --ml-text-lg: 20px;
  --ml-text-xl: 24px;
  --ml-text-2xl: 30px;
  --ml-text-3xl: 38px;
  --ml-leading-tight: 1.2;
  --ml-leading-normal: 1.5;
  --ml-weight-regular: 400;
  --ml-weight-medium: 500;
  --ml-weight-semibold: 600;
  --ml-weight-bold: 700;

  /* Spacing (4pt grid) */
  --ml-space-1: 4px;
  --ml-space-2: 8px;
  --ml-space-3: 12px;
  --ml-space-4: 16px;
  --ml-space-5: 20px;
  --ml-space-6: 24px;
  --ml-space-8: 32px;
  --ml-space-10: 40px;
  --ml-space-12: 48px;
  --ml-space-16: 64px;

  /* Radius: hierarchy, not one value everywhere */
  --ml-radius-sm: 6px;          /* inputs, chips, table cells */
  --ml-radius-md: 10px;         /* buttons, cards */
  --ml-radius-lg: 16px;         /* modals, sheets, large panels */
  --ml-radius-full: 999px;      /* badges, avatars, pills */

  /* Elevation: borders carry structure; shadow only for floating layers */
  --ml-shadow-float: 0 8px 24px rgba(27, 35, 34, 0.12), 0 2px 6px rgba(27, 35, 34, 0.08);
  --ml-shadow-toast: 0 10px 30px rgba(27, 35, 34, 0.22);

  /* Motion */
  --ml-ease: cubic-bezier(0.2, 0, 0, 1);
  --ml-duration-fast: 120ms;
  --ml-duration-base: 180ms;
  --ml-duration-slow: 260ms;

  /* Layout */
  --ml-sidebar-w: 240px;
  --ml-content-max: 1200px;
  --ml-control-h: 40px;         /* buttons and inputs */
  --ml-control-h-sm: 32px;
  --ml-control-h-lg: 48px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ml-primary: #2FB5A2;
    --ml-primary-hover: #4AC4B3;
    --ml-primary-active: #27A08F;
    --ml-primary-soft: #16302C;
    --ml-on-primary: #08201C;
    --ml-accent: #F0B341;
    --ml-accent-soft: #3A2E12;
    --ml-on-accent: #1A1203;

    --ml-bg: #111817;
    --ml-surface: #182120;
    --ml-surface-2: #1F2A28;
    --ml-border: #2A3533;
    --ml-border-strong: #3A4745;
    --ml-text: #ECEFEE;
    --ml-text-2: #A8B1AF;
    --ml-text-3: #727D7B;
    --ml-inverse: #ECEFEE;
    --ml-on-inverse: #111817;

    --ml-success: #4CC27A;
    --ml-success-soft: #14301F;
    --ml-warning: #F0B341;
    --ml-warning-soft: #3A2E12;
    --ml-danger: #F07171;
    --ml-danger-hover: #F58A8A;
    --ml-danger-soft: #3B1A1A;
    --ml-info: #6E9BEF;
    --ml-info-soft: #172643;

    --ml-focus: #2FB5A2;
    --ml-focus-ring: 0 0 0 3px rgba(47, 181, 162, 0.35);
    --ml-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
    --ml-shadow-toast: 0 10px 30px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ml-primary: #2FB5A2;
  --ml-primary-hover: #4AC4B3;
  --ml-primary-active: #27A08F;
  --ml-primary-soft: #16302C;
  --ml-on-primary: #08201C;
  --ml-accent: #F0B341;
  --ml-accent-soft: #3A2E12;
  --ml-on-accent: #1A1203;
  --ml-bg: #111817;
  --ml-surface: #182120;
  --ml-surface-2: #1F2A28;
  --ml-border: #2A3533;
  --ml-border-strong: #3A4745;
  --ml-text: #ECEFEE;
  --ml-text-2: #A8B1AF;
  --ml-text-3: #727D7B;
  --ml-inverse: #ECEFEE;
  --ml-on-inverse: #111817;
  --ml-success: #4CC27A;
  --ml-success-soft: #14301F;
  --ml-warning: #F0B341;
  --ml-warning-soft: #3A2E12;
  --ml-danger: #F07171;
  --ml-danger-hover: #F58A8A;
  --ml-danger-soft: #3B1A1A;
  --ml-info: #6E9BEF;
  --ml-info-soft: #172643;
  --ml-focus: #2FB5A2;
  --ml-focus-ring: 0 0 0 3px rgba(47, 181, 162, 0.35);
  --ml-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
  --ml-shadow-toast: 0 10px 30px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* Base */
html { font-family: var(--ml-font); font-size: var(--ml-text-base); line-height: var(--ml-leading-normal); -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--ml-bg); color: var(--ml-text); }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: none; box-shadow: var(--ml-focus-ring); border-radius: var(--ml-radius-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}