/*
 * M1 Limousine — Design Tokens
 * SINGLE OWNER for every custom property in the product surface.
 *
 * Nothing below this file may open a second :root block. Page modules consume
 * tokens; they never redefine them. The cascade manifest below is the single
 * declaration of layer precedence in the product.
 *
 * RESPONSIVE LADDER
 * Shared layers (tokens, design-system, foundation, shell, auth, density) use
 * only these widths:
 *   320px  hard floor — no horizontal overflow below this
 *   360px  small phone
 *   430px  large phone
 *   520px  datetime picker becomes a bottom sheet
 *   760px  phone / tablet boundary — the mobile-density switch
 *   840px  auth split collapses (component reflow point)
 *   900px  tablet — desktop nav gives way to the mobile dock
 *
 * Page modules (m1-booking, m1-workspace, m1-detail, m1-secondary,
 * bookings-landing) may add one further reflow point where their own content
 * stops fitting, but must not restate a shared decision at a different width.
 *
 * OWNERSHIP
 *   m1-tokens         every custom property, and the layer manifest
 *   m1-design-system  reset, base elements, shared components, utilities, print
 *   m1-foundation     buttons, form controls, surfaces, alerts, status component
 *   m1-shell          header, mobile nav, dock, footer, toasts — at every width
 *   m1-auth           the sign-in/sign-up composition — at every width
 *   m1-mobile-density page geometry, controls, cards, forms, reservation
 *                     surfaces on phones. Never the shell.
 */
/* ------------------------------------------------------------------ *
 * CASCADE MANIFEST — the one place layer precedence is declared.
 * Later layers win. m1-mobile-density is LAST so the compact mobile
 * composition can own phone geometry without a single !important.
 * ------------------------------------------------------------------ */
@layer reset, tokens, base, components, utilities, responsive, print,
       m1-foundation, m1-shell, m1-auth, page, m1-booking, m1-mobile-density;

@layer tokens {
  :root {
    /* ---- product palette, typography, spacing, motion ---- */
    color-scheme: light;

    /* Global palette */
    --m1-ink-950: #080d17;
    --m1-ink-900: #0f172a;
    --m1-ink-800: #1e293b;
    --m1-ink-700: #334155;
    --m1-ink-600: #475569;
    --m1-ink-500: #64748b;
    --m1-ink-400: #94a3b8;
    --m1-ink-300: #cbd5e1;
    --m1-ink-200: #e2e8f0;
    --m1-ink-100: #f1f5f9;
    --m1-ink-50: #f8fafc;
    --m1-white: #ffffff;

    --m1-brand-700: #3e5c76;
    --m1-brand-600: #4f6d88;
    --m1-brand-500: #6f8da7;
    --m1-brand-100: #dbe5ed;
    --m1-brand-50: #f1f5f8;

    /* Executive steel-blue brand accent. #8EA8C3 is used on dark navy; the
       stronger #4F6D88 variant is used for small text on ivory/light surfaces. */
    --m1-business-accent: #8ea8c3;
    --m1-business-accent-strong: #4f6d88;
    --m1-business-accent-soft: #eaf0f5;
    --m1-business-accent-border: #c8d5e1;
    --color-business-accent: var(--m1-business-accent);
    --color-business-accent-strong: var(--m1-business-accent-strong);
    --color-business-accent-soft: var(--m1-business-accent-soft);

    --m1-success-700: #047857;
    --m1-success-600: #059669;
    --m1-success-100: #d1fae5;
    --m1-success-50: #ecfdf5;

    --m1-warning-800: #92400e;
    --m1-warning-700: #b45309;
    --m1-warning-100: #fef3c7;
    --m1-warning-50: #fffbeb;

    --m1-danger-700: #b91c1c;
    --m1-danger-600: #dc2626;
    --m1-danger-100: #fee2e2;
    --m1-danger-50: #fef2f2;

    --m1-info-700: #0369a1;
    --m1-info-100: #e0f2fe;
    --m1-info-50: #f0f9ff;

    /* Semantic aliases */
    --color-bg: #f6f4ef;
    --color-surface: var(--m1-white);
    --color-surface-subtle: #fbfaf7;
    --color-surface-muted: #f0ede7;
    --color-surface-raised: var(--m1-white);
    --color-inverse: var(--m1-ink-950);

    --color-text: var(--m1-ink-900);
    --color-text-secondary: var(--m1-ink-600);
    --color-text-muted: var(--m1-ink-500);
    --color-text-subtle: var(--m1-ink-400);
    --color-text-inverse: var(--m1-white);

    --color-border: #e7e3db;
    --color-border-strong: var(--m1-ink-300);
    --color-border-subtle: #f0ede7;

    --color-brand: var(--m1-brand-600);
    --color-brand-hover: var(--m1-brand-700);
    --color-brand-soft: var(--m1-brand-50);
    --color-focus: #4f6d88;

    --color-success: var(--m1-success-600);
    --color-success-strong: var(--m1-success-700);
    --color-success-soft: var(--m1-success-50);
    --color-warning: var(--m1-warning-700);
    --color-warning-strong: var(--m1-warning-800);
    --color-warning-soft: var(--m1-warning-50);
    --color-error: var(--m1-danger-600);
    --color-error-strong: var(--m1-danger-700);
    --color-error-soft: var(--m1-danger-50);
    --color-info: var(--m1-info-700);
    --color-info-soft: var(--m1-info-50);

    /* Compatibility aliases for existing templates */
    --color-primary-dark: var(--m1-ink-900);
    --color-primary-light: var(--m1-ink-800);
    --color-primary-lighter: var(--m1-ink-700);
    --color-accent-blue: var(--color-brand);
    --color-accent-red: var(--color-error);
    --color-success-light: var(--m1-success-100);
    --color-success-dark: var(--color-success-strong);
    --color-warning-light: var(--m1-warning-100);
    --color-warning-dark: var(--color-warning-strong);
    --color-error-light: var(--m1-danger-100);
    --color-error-dark: var(--color-error-strong);
    --color-info-light: var(--m1-info-100);
    --color-info-dark: var(--m1-brand-700);
    --color-white: var(--m1-white);
    --color-gray-50: var(--m1-ink-50);
    --color-gray-100: var(--m1-ink-100);
    --color-gray-200: var(--m1-ink-200);
    --color-gray-300: var(--m1-ink-300);
    --color-gray-400: var(--m1-ink-400);
    --color-gray-500: var(--m1-ink-500);
    --color-gray-600: var(--m1-ink-600);
    --color-gray-700: var(--m1-ink-700);
    --color-gray-800: var(--m1-ink-800);
    --color-gray-900: var(--m1-ink-900);

    --primary: var(--m1-ink-900);
    --primary-hover: var(--m1-ink-800);
    --primary-light: var(--m1-ink-100);
    --primary-accent: var(--color-brand);
    --success: var(--color-success);
    --success-light: var(--color-success-soft);
    --success-dark: var(--color-success-strong);
    --pending: var(--color-warning);
    --pending-light: var(--color-warning-soft);
    --pending-dark: var(--color-warning-strong);
    --error: var(--color-error);
    --error-light: var(--color-error-soft);
    --error-dark: var(--color-error-strong);
    --info: var(--color-info);
    --info-light: var(--color-info-soft);
    --info-dark: var(--m1-brand-700);
    --accent: var(--m1-ink-700);
    --accent-light: var(--m1-ink-100);
    --accent-dark: var(--m1-ink-900);
    --dark: var(--color-text);
    --dark-light: var(--m1-ink-800);
    --dark-lighter: var(--m1-ink-700);
    --light: var(--color-surface-subtle);
    --light-gray: var(--color-surface-muted);
    --light-hover: var(--m1-ink-200);
    --white: var(--m1-white);
    --border: var(--color-border);
    --border-light: var(--color-border-subtle);
    --border-dark: var(--color-border-strong);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --text-light: var(--color-text-subtle);

    /* Typography */
    --font-sans: "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.8125rem;
    --font-size-md: 0.875rem;
    --font-size-base: 0.9375rem;
    --font-size-lg: 1.0625rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: clamp(1.75rem, 2vw + 1rem, 2.5rem);
    --font-size-display: clamp(2.25rem, 5vw, 4.5rem);
    --line-tight: 1.2;
    --line-normal: 1.5;
    --line-relaxed: 1.7;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;

    /* 4px spacing system */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --spacing-xs: var(--space-2);
    --spacing-sm: var(--space-4);
    --spacing-md: var(--space-6);
    --spacing-lg: var(--space-10);
    --spacing-xl: var(--space-16);
    --spacing-2xl: var(--space-24);

    /* Geometry -- aliased onto the authoritative --m1-radius-* scale
       (m1-foundation.css) so every component, old and new, shares one
       restrained corner-radius system instead of two independently-tuned
       ones: small/control ~6px, card/section ~10px, major shell/auth/modal
       ~16px, pill only where semantically justified. */
    --radius-xs: var(--m1-radius-sm);
    --radius-sm: var(--m1-radius-sm);
    --radius-md: var(--m1-radius-md);
    --radius-lg: var(--m1-radius-lg);
    --radius-xl: var(--m1-radius-lg);
    --radius-pill: 999px;
    --radius: var(--radius-sm);
    --radius-2xl: var(--radius-lg);
    /* Control heights. Touch is the default because the smallest, least
       forgiving device sets the floor; a pointer device narrows them below.
       sm = compact toolbar control, md = ordinary button, lg = form field. */
    --control-sm: 2rem;      /* 32px */
    --control-md: 2.75rem;   /* 44px on touch */
    --control-lg: 2.75rem;   /* 44px on touch */
    --control-quiet: 2.5rem; /* 40px on touch */
    /* Operator density (2026.09.01.20) — staff/dispatch surfaces scan and
       repeat-enter data; this is deliberately tighter than --control-md even
       on touch, because a mouse/trackpad is the primary staff input device. */
    --control-operator: 2.125rem;      /* 34px */
    --m1-operator-surface-padding: .75rem;
    --nav-height: 4rem;
    --content-width: 80rem;
    --content-narrow: 48rem;

    /* Shared component geometry (2026.09.01.20) */
    --m1-choice-card-padding: .9rem;
    --m1-choice-card-padding-compact: .65rem;
    --m1-stepper-button-size: 2.5rem;   /* 40px, matches --control-md */
    --m1-stepper-value-width: 3.25rem;  /* 52px */
    --m1-timeline-gutter: 1.5rem;
    --m1-timeline-marker: .5rem;
    --m1-timeline-item-gap: 1.1rem;
    --m1-timeline-title-meta-gap: .3rem;
    --m1-footer-column-gap: 3rem;
    --m1-footer-stack-gap: .65rem;
    --m1-admin-row-height: 3.25rem;
    --m1-popover-elevation: var(--m1-shadow-md);
    --m1-popover-radius: var(--m1-radius-md);
    --m1-popover-max-height: 18rem;

    /* Mobile density — compact composition model (2026.09.01.14) */
    --m1-mobile-page-gutter: 16px;
    --m1-mobile-page-gutter-narrow: 12px;
    --m1-mobile-section-gap: 20px;
    --m1-mobile-section-gap-lg: 24px;
    --m1-mobile-card-gap: 12px;
    --m1-mobile-stack-gap: 14px;
    --m1-mobile-field-gap: 14px;
    --m1-mobile-label-gap: 6px;
    --m1-mobile-card-padding: 18px;
    --m1-mobile-card-padding-compact: 14px;
    --m1-mobile-control-height: 44px;
    --m1-mobile-control-height-compact: 42px;
    --m1-mobile-button-height: 44px;
    --m1-mobile-button-height-compact: 40px;
    --m1-mobile-icon-target: 44px;
    --m1-mobile-header-height: 56px;
    --m1-mobile-bottom-nav-height: 60px;
    --m1-mobile-footer-gap: 16px;
    --m1-mobile-radius-control: 6px;
    --m1-mobile-radius-card: 10px;
    --m1-mobile-radius-floating: 16px;

    /* Elevation */
    --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.04);
    --shadow-sm: 0 1px 3px rgb(15 23 42 / 0.06), 0 1px 2px rgb(15 23 42 / 0.04);
    --shadow-md: 0 8px 24px rgb(15 23 42 / 0.08);
    --shadow-lg: 0 20px 48px rgb(15 23 42 / 0.12);
    --shadow-xl: 0 28px 72px rgb(8 13 23 / 0.18);

    /* Motion */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --duration-fast: 120ms;
    --duration-normal: 180ms;
    --duration-slow: 240ms;
    --transition-fast: var(--duration-fast) var(--ease-standard);
    --transition-normal: var(--duration-normal) var(--ease-standard);
    --transition-slow: var(--duration-slow) var(--ease-standard);
    --transition: var(--transition-normal);

    /* ---- surface/system aliases (authoritative where names overlap) ---- */
    --m1-canvas: #f5f4ef;
    /* Canvas grid. A desaturated steel blue at very low alpha over warm
       ivory: enough to give the page structure, not enough to read as a
       pattern. 40px matches the 8px spacing scale. */
    --m1-canvas-grid: rgb(51 78 104 / 0.035);
    --m1-canvas-grid-size: 40px;
    /* Phone rhythm: page gutter, gap between fields, padding inside a compact
       card. Stated once here; the density layer composes with them. */
    --m1-page-gutter: 14px;
    --m1-field-gap: 14px;
    --m1-card-padding: 14px;
    --m1-surface: #ffffff;
    --m1-surface-soft: #fbfaf7;
    --m1-surface-strong: #f0ede7;
    --m1-ink: #121927;
    --m1-ink-muted: #626a76;
    /* 4.5:1 or better on every product surface (#fff, #fbfaf7, #f5f4ef,
       #f0ede7). The previous #8a94a3 was 2.6-3.1:1 and carried the
       reading-page metadata, the "Optional" field marker and the
       cancellation route labels. Dark surfaces override it locally. */
    --m1-ink-subtle: #616a78;
    --m1-navy: #0b1320;
    --m1-navy-soft: #162235;
    --m1-business-accent: #8ea8c3;
    --m1-business-accent-strong: #4f6d88;
    --m1-business-accent-soft: #eaf0f5;
    --m1-business-accent-border: #c8d5e1;
    --m1-border: #e7e3db;
    --m1-border-strong: #cec8bc;
    --m1-success: #16745b;
    --m1-success-soft: #e8f5ef;
    --m1-warning: #8a5b13;
    --m1-warning-soft: #fbf4df;
    --m1-danger: #a13b3b;
    --m1-danger-soft: #fbecec;
    --m1-info: #265f91;
    --m1-info-soft: #eaf3fa;
    --m1-focus: #4f6d88;
    --m1-shadow-sm: 0 1px 2px rgba(16, 24, 39, .035), 0 10px 30px rgba(16, 24, 39, .045);
    --m1-shadow-md: 0 24px 64px rgba(9, 17, 31, .11);
    --m1-radius-sm: 8px;
    --m1-radius-md: 12px;
    --m1-radius-lg: 18px;
    --m1-content: 1180px;
    --m1-reading: 760px;
    --m1-space-1: .25rem;
    --m1-space-2: .5rem;
    --m1-space-3: .75rem;
    --m1-space-4: 1rem;
    --m1-space-5: 1.25rem;
    --m1-space-6: 1.5rem;
    --m1-space-8: 2rem;
    --m1-space-10: 2.5rem;
    --m1-space-12: 3rem;

    /* Dark-surface button contract: any surface that overrides --m1-ink to a
       light color (e.g. .guest-help, .driver-completion) must also override
       these so .button/.button--secondary/.button--quiet/.button--danger
       stay visible against that dark background instead of inheriting
       light-surface button colors meant for the canvas. */
    --m1-button-primary-bg: var(--m1-navy);
    --m1-button-primary-border: transparent;
    --m1-button-primary-text: #fff;
    --m1-button-secondary-bg: var(--m1-surface);
    --m1-button-secondary-border: var(--m1-border);
    --m1-button-secondary-text: var(--m1-ink);
    --m1-button-quiet-text: var(--m1-ink-muted);
    --m1-button-danger-border: #e6b9b9;
    --m1-button-danger-text: var(--m1-danger);

    /* Semantic component aliases keep page modules independent of palette names. */
    --color-text: var(--m1-ink);
    --color-text-muted: var(--m1-ink-muted);
    --color-navy: var(--m1-navy);
    --color-surface: var(--m1-surface);
    --color-surface-subtle: var(--m1-surface-soft);
    --color-border: var(--m1-border);
    --color-border-strong: var(--m1-border-strong);
    --color-accent: var(--m1-business-accent);
    --color-accent-strong: var(--m1-business-accent-strong);
    --color-accent-light: var(--m1-business-accent);
    --color-accent-soft: var(--m1-business-accent-soft);
    --color-accent-border: var(--m1-business-accent-border);
    --color-success-soft: var(--m1-success-soft);
    --color-success-text: var(--m1-success);
    --color-success-border: #9fcfbe;
    --color-warning: var(--m1-warning);
    --color-warning-soft: var(--m1-warning-soft);
    --color-warning-text: var(--m1-warning);
    --color-warning-border: #dec78a;
    --color-danger-soft: var(--m1-danger-soft);
    --color-danger-text: var(--m1-danger);
    --color-danger-border: #e3b0b0;
    --color-info: var(--m1-info);
    --color-info-soft: var(--m1-info-soft);
    --color-info-text: var(--m1-info);
    --color-info-border: #b4d0e5;
    --shadow-xs: 0 1px 2px rgba(16, 24, 39, .05);
    --shadow-sm: var(--m1-shadow-sm);
    --font-display: ui-serif, Georgia, "Times New Roman", serif;

    /* Referenced by workspace/design-system components but never previously
       declared, so those borders silently fell back to the initial value. */
    --color-business-accent-border: var(--m1-business-accent-border);

    /* NOTE: --m1-snap-*, --m1-worklist-columns and --m1-status-reserved-block
       are intentionally NOT global. They are component-scoped variables set on
       .m1-snap-carousel / .m1-worklist / the booking form, and every consumer
       supplies a deliberate var() fallback. Declaring them here would silently
       override those per-component values. */
  }

  /* The only responsive token in the system: the shell is shorter on phones,
     and .messages positions itself from this value. */
  @media (max-width: 760px) {
    :root {
      --nav-height: 3.75rem;
    }
  }
}

@layer tokens {
  /* A mouse is precise, so the same controls can be tighter without losing
     anything. Keyed on the pointer rather than on width: a touch laptop keeps
     the larger targets. */
  @media (pointer: fine) {
    :root {
      --control-md: 2.5rem;    /* 40px */
      --control-lg: 2.5rem;    /* 40px */
      --control-quiet: 2.125rem; /* 34px */
    }
  }
}