/* ========================
   M3 DESIGN TOKENS
   Material Design 3 compliant token system
   Change values here to update the entire site
   ======================== */

/* Shared tokens (type, elevation, spacing, shape, motion, sizes). The colour roles live in
   the ":root, .mk-section--dark" block below and the light overrides after it. email.js
   reads this block as the first plain :root rule in the file - keep it first, and never
   write the selector followed by an opening brace inside a comment (the parser is a regex). */
:root {
  /* ---- TYPOGRAPHY SCALE (Major Third 1.25 ratio) ---- */

  /* Font families */
  --md-font-main: 'Montserrat', Arial, sans-serif;

  /* Letter-spacing tokens */
  --md-letter-spacing-default: 0;
  --md-letter-spacing-tight-small: -0.005em;  /* -0.5% */
  --md-letter-spacing-tight-medium: -0.015em; /* -1.5% */
  --md-letter-spacing-tight-large: -0.02em;   /* -2% */
  --md-letter-spacing-wide: 0.1em;            /* +10%: the eyebrows' tracking (the assistant's section headings; .mk-eyebrow writes the literal) */

  /* Display */
  --md-display-large-size: 3.8147rem;    /* 61.04px */
  --md-display-large-line: 4.5rem;       /* 72px */
  --md-display-large-weight: 400;
  --md-display-large-tracking: var(--md-letter-spacing-tight-large);

  --md-display-medium-size: 3.0518rem;   /* 48.83px */
  --md-display-medium-line: 3.75rem;     /* 60px */
  --md-display-medium-weight: 400;
  --md-display-medium-tracking: var(--md-letter-spacing-tight-large);

  --md-display-small-size: 2.4414rem;    /* 39.06px */
  --md-display-small-line: 3rem;         /* 48px */
  --md-display-small-weight: 400;
  --md-display-small-tracking: var(--md-letter-spacing-tight-large);

  /* Headline */
  --md-headline-large-size: 1.9531rem;   /* 31.25px */
  --md-headline-large-line: 2.5rem;      /* 40px */
  --md-headline-large-weight: 400;
  --md-headline-large-tracking: var(--md-letter-spacing-tight-large);

  --md-headline-medium-size: 1.5625rem;  /* 25px */
  --md-headline-medium-line: 2rem;       /* 32px */
  --md-headline-medium-weight: 400;
  --md-headline-medium-tracking: var(--md-letter-spacing-tight-medium);

  --md-headline-small-size: 1.25rem;     /* 20px */
  --md-headline-small-line: 1.75rem;     /* 28px */
  --md-headline-small-weight: 400;
  --md-headline-small-tracking: var(--md-letter-spacing-tight-medium);

  /* Title */
  --md-title-large-size: 1.25rem;        /* 20px */
  --md-title-large-line: 1.75rem;        /* 28px */
  --md-title-large-weight: 400;
  --md-title-large-tracking: var(--md-letter-spacing-tight-medium);

  --md-title-medium-size: 1rem;          /* 16px */
  --md-title-medium-line: 1.5rem;        /* 24px */
  --md-title-medium-weight: 500;
  --md-title-medium-tracking: var(--md-letter-spacing-tight-medium);

  --md-title-small-size: 0.8rem;         /* 12.8px */
  --md-title-small-line: 1.25rem;        /* 20px */
  --md-title-small-weight: 500;
  --md-title-small-tracking: var(--md-letter-spacing-tight-small);

  /* Body */
  --md-body-large-size: 1rem;            /* 16px */
  --md-body-large-line: 1.5rem;          /* 24px */
  --md-body-large-weight: 400;
  --md-body-large-tracking: var(--md-letter-spacing-default);

  --md-body-medium-size: 0.8rem;         /* 12.8px */
  --md-body-medium-line: 1.25rem;        /* 20px */
  --md-body-medium-weight: 400;
  --md-body-medium-tracking: var(--md-letter-spacing-default);

  --md-body-small-size: 0.64rem;         /* 10.24px */
  --md-body-small-line: 1rem;            /* 16px */
  --md-body-small-weight: 400;
  --md-body-small-tracking: var(--md-letter-spacing-default);

  /* Label */
  --md-label-large-size: 0.8rem;         /* 12.8px */
  --md-label-large-line: 1.25rem;        /* 20px */
  --md-label-large-weight: 500;
  --md-label-large-tracking: var(--md-letter-spacing-default);

  --md-label-medium-size: 0.64rem;       /* 10.24px */
  --md-label-medium-line: 1rem;          /* 16px */
  --md-label-medium-weight: 500;
  --md-label-medium-tracking: var(--md-letter-spacing-default);

  --md-label-small-size: 0.64rem;        /* 10.24px */
  --md-label-small-line: 1rem;           /* 16px */
  --md-label-small-weight: 500;
  --md-label-small-tracking: var(--md-letter-spacing-default);

  /* Marketing (public pages) - reading size between body-medium and body-large */
  --md-marketing-small-size: 0.875rem;   /* 14px */
  --md-marketing-small-line: 1.25rem;    /* 20px */

  /* Weight */
  --md-weight-bold: 600;
  --md-weight-heavy: 700;

  /* ---- ELEVATION (6 levels, M3 shadow values) ---- */
  --md-elevation-0: none;
  --md-elevation-1: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
  --md-elevation-2: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.3);
  --md-elevation-3: 0 11px 7px 0 rgba(0, 0, 0, 0.19), 0 13px 25px 0 rgba(0, 0, 0, 0.3);
  --md-elevation-4: 0 14px 12px 0 rgba(0, 0, 0, 0.17), 0 20px 40px 0 rgba(0, 0, 0, 0.3);
  --md-elevation-5: 0 17px 17px 0 rgba(0, 0, 0, 0.15), 0 27px 55px 0 rgba(0, 0, 0, 0.3);

  /* ---- SPACING (8px baseline grid) ---- */
  --md-spacing-1: 0.25rem;   /* 4px */
  --md-spacing-2: 0.5rem;    /* 8px */
  --md-spacing-3: 0.75rem;   /* 12px */
  --md-spacing-4: 1rem;      /* 16px */
  --md-spacing-5: 1.25rem;   /* 20px */
  --md-spacing-6: 1.5rem;    /* 24px */
  --md-spacing-8: 2rem;      /* 32px */
  --md-spacing-10: 2.5rem;   /* 40px */
  --md-spacing-12: 3rem;     /* 48px */
  --md-spacing-16: 4rem;     /* 64px */
  --md-spacing-20: 5rem;     /* 80px */
  --md-spacing-24: 6rem;     /* 96px */
  --md-spacing-32: 8rem;     /* 128px */
  --md-spacing-40: 10rem;    /* 160px */
  --md-spacing-48: 12rem;    /* 192px */
  --md-spacing-64: 16rem;    /* 256px */

  /* ---- SHAPE (border radius scale) ---- */
  --md-shape-none: 0;
  --md-shape-extra-small: 4px;
  --md-shape-small: 8px;
  --md-shape-medium: 12px;
  --md-shape-large: 16px;
  --md-shape-extra-large: 28px;
  --md-shape-phone: 40px;
  --md-shape-full: 9999px;

  /* ---- MOTION ---- */
  --md-motion-duration-short: 0.15s;
  --md-motion-duration-medium: 0.3s;
  --md-motion-duration-long: 0.5s;
  --md-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-motion-easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --md-motion-stagger-delay: 0.05s;  /* For staggered animations */

  /* ---- BUTTON SIZES (M3 Standard) ---- */
  /* Standard button heights */
  --md-button-height-small: 32px;
  --md-button-height-medium: 40px;   /* Default */
  --md-button-height-large: 48px;

  /* Button padding (achieves standard heights with label-large line-height of 20px) */
  --md-button-padding-y-small: 6px;   /* 6px + 20px + 6px = 32px */
  --md-button-padding-y-medium: 10px; /* 10px + 20px + 10px = 40px */
  --md-button-padding-y-large: 14px;  /* 14px + 20px + 14px = 48px */

  --md-button-padding-x-small: 12px;
  --md-button-padding-x-medium: 24px;
  --md-button-padding-x-large: 32px;
  --md-button-radius: var(--md-shape-full);   /* a button's corner (.btn, .icon-btn, .dialog__btn): the pill; the client portal re-points it to --md-shape-small (the block at the end of this file) */
  --md-segmented-pad: 3px;   /* the segmented control's track padding = the white thumb's inset on every side (components.css .segmented-button); 3 + 34 + 3 keeps the control at the button height */

  /* Icon button standard size (touch target) */
  --md-icon-button-size: 40px;

  /* FAB sizes */
  --md-fab-size-small: 40px;
  --md-fab-size-medium: 56px;
  --md-fab-size-large: 96px;

  /* Switch size */
  --md-switch-width: 52px;

  /* ---- TOP APP BAR HEIGHTS ---- */
  --md-top-app-bar-height-small: 64px;
  --md-top-app-bar-height-medium: 112px;
  --md-top-app-bar-height-large: 152px;

  /* Navbar logo */
  --md-navbar-logo-height: 32px;

  /* Hero card */
  --md-hero-card-height: 600px;

  /* Subpage hero (marketing.css .mk-hero): every non-home public page shares one
     viewport-relative height, like the landing hero's 100vh. The hero box ends at 90% of
     the first screen (the sticky header and .main's top padding sit above it), so the shaded
     section 2 always peeks above the fold. Browsers without svh fall back to natural height. */
  --md-hero-min-height: calc(90svh - var(--md-header-height) - var(--md-spacing-12));
  --md-hero-min-height-mobile: calc(80svh - var(--md-header-height) - var(--md-spacing-10));
  /* Standard subpage hero content block at desktop sizes: eyebrow 32 + one-line title 88 +
     two-line lead 88 + large buttons 48 + trust strip 80. marketing.css .mk-hero centres a block
     of this height, so every hero's first line lands on the same line whatever it contains */
  --md-hero-content-height: 336px;
  /* Standard split hero block (the Solutions pages): two-line title, three-line lead, one button,
     hint and four chips in two rows. marketing.css .mk-hero--split centres a block of this height,
     so the split heroes share a second, higher start line, Metered's own position; if Metered's
     copy column measures differently in the browser, this value follows it */
  --md-hero-content-height-split: 512px;

  /* Even-height content sections (marketing.css .mk-section--even, every public page): the floor
     each regular section rises to. Set by the phone-mock sections (home, app guide): the mock
     (600px, the same size partials/journey-anim.ejs hard-codes) plus the section padding on both
     sides. A section whose content is taller keeps its natural height */
  --md-section-min-height: calc(var(--md-device-phone-height) + 2 * var(--md-spacing-24));

  /* Guide pages (marketing.css .mk-guide-step / .mk-device): step badge and the
     laptop / phone mock frames, desktop and phone sizes */
  --md-step-badge-size: 56px;
  --md-device-laptop-width: 480px;
  --md-device-laptop-height: 365px;
  --md-device-laptop-height-mobile: 260px;
  --md-device-bar-height: 28px;
  --md-device-appbar-height: 28px;  /* miniature portal app bar under the address bar */
  --md-device-laptop-zoom: 1.15;    /* the 480 x 365 design size renders at 552 x 420, the guide column */
  --md-device-phone-width: 328px;
  --md-device-phone-height: 600px;
  --md-device-phone-width-mobile: 240px;
  --md-device-phone-height-mobile: 440px;
  --md-device-phone-bezel: 10px;
  --md-device-notch-width: 72px;
  --md-device-notch-height: 20px;
  --md-device-notch-width-mobile: 54px;
  --md-device-notch-height-mobile: 16px;

  /* Auth card (login, register) */
  --md-auth-card-width: 400px;

  /* ---- INPUT & MENU SIZES ---- */
  /* Menu item height (matches button height) */
  --md-menu-item-height: 40px;

  /* Single-line text controls (outlined text fields, the search bar, the outlined dropdown trigger)
     share the button height, so a field, a button and a segmented group line up in one row; their
     text is the body-medium role (the search bar's size) at every width */
  --md-text-field-height: var(--md-button-height-medium);
  --md-text-field-font-size: var(--md-body-medium-size);
  --md-text-field-line: var(--md-body-medium-line);

  /* A short numeric field beside a wider one (passes per month, the hours a pass is valid): room for
     its label and the stepper (components.css .expand-form__cell--short) */
  --md-text-field-width-short: 200px;

  /* The OTP digit cells (the phone sign-in keeps the taller touch target), list rows, the tag
     input's floor and the Stripe element's floor (no longer the text fields) */
  --md-input-field-height: 56px;

  /* Icon sizes */
  --md-icon-size-small: 18px;
  --md-icon-size-medium: 24px;
  --md-icon-size-large: 36px;

  /* Input field icon spacing */
  --md-input-icon-area: 48px;

  /* ---- COMPONENT WIDTHS ---- */
  --md-component-width-xsmall: 160px;
  --md-component-width-small: 280px;
  --md-component-width-medium: 360px;
  --md-component-width-large: 400px;
  --md-component-width-xlarge: 560px;

  /* ---- CLIENT-PORTAL TABLES (components.css .data-table--fixed; the owner's rules of 2026-10-29) ----
     One width per column KIND, the same on every table; the text columns share what is left; one row
     height everywhere (the 40px button plus the cell's paddings); below the floor the wrapper scrolls */
  --md-table-col-select: 48px;        /* the 20px checkbox and the cell's left padding */
  --md-table-col-code: 112px;         /* a unit number, a space label, a plate, a location code, a month */
  --md-table-col-number: 112px;       /* a count or an amount */
  --md-table-col-status: 176px;       /* a status chip, with room for a label chip beside it */
  --md-table-col-date: 176px;         /* "Oct 22, 5:35 PM", "Wed Oct 29, 2:00 PM EDT" */
  --md-table-col-phone: 168px;
  --md-table-col-label: 128px;        /* a label chip (Exempt Plates' Type) */
  --md-table-col-actions-1: 104px;    /* one icon button, the header word "Actions" whole */
  --md-table-col-actions-2: 200px;    /* an icon button and a word, or two words */
  --md-table-col-actions-3: 288px;    /* three words, or four icon buttons */
  --md-table-min-width: 720px;
  --md-table-min-width-wide: 960px;   /* the tables with many fixed columns: Residents, Managers, Location Codes, Reservations */
  --md-table-cell-content-height: var(--md-button-height-medium);   /* 40px: the cell's 12px paddings make the 64px row, the hairline 65 */

  /* End-user portal page widths (one wizard card / a list page) and plate lettering */
  --md-page-width-card: 480px;
  --md-page-width-narrow: 600px;
  --md-plate-tracking: 0.05em;
  --md-code-tracking: 0.2em;   /* a location or pass code typed or shown as spaced characters */

  /* ---- PARKING MAP (components.css .pmap; src/js/components/parking-map/tokens.js reads these at
     runtime, so the drawing follows the stylesheet; its DEFAULTS table repeats the numbers for a page
     whose stylesheet lacks one, and lib/parking-map/check.js keeps the two equal) ----
     A map document's units are these pixels at scale 1: a stall 80 deep by 40 wide (never longer than
     2:1), 4 between stalls, the aisles and lanes, the band of a building, the wall inset. The renderer
     scales the geometry to the section's width - never above 1, never below --md-map-min-scale - while
     words and icons keep their size at every scale (the text room is reserved for the smallest). */
  --md-map-stall-w: 80px;              /* a stall's depth: the side that meets the aisle */
  --md-map-stall-h: 40px;              /* a stall's width along the row (a 44px pitch with the gap) */
  --md-map-stall-gap: 4px;             /* between two stalls of a row; the `stall` placement gap */
  --md-map-stall-inset: 4px;           /* inside a stall, around its number and icon */
  --md-map-building-gap: 12px;         /* between a stall row or an aisle and a building band: the `building` placement gap */
  --md-map-aisle-w: 120px;             /* a two-way aisle; the `aisle` placement gap */
  --md-map-aisle-w-one-way: 80px;      /* a one-way aisle (the document's `flow` decides) */
  --md-map-lane-w: 60px;               /* a drive lane with no stalls */
  --md-map-pad: 16px;                  /* the wall inset: the room between the stalls and the lot's outline; half of it outside the outline */
  --md-map-band-h: 24px;               /* a building or stairs band's thickness */
  --md-map-pillar: 6px;                /* a pillar's square */
  --md-map-radius: 6px;                /* a stall's corners */
  --md-map-radius-box: var(--md-shape-small);          /* the lot outline's and every band's corners */
  --md-map-stroke-wall: 2px;           /* the lot outline, the bands, an opening's icon */
  --md-map-stroke-line: var(--md-divider-thickness);   /* a stall's outline, a centreline */
  --md-map-hatch-step: 5px;            /* the hatch's stripe: a taken or closed stall, a hatched band */
  --md-map-hatch-gap: 6px;             /* the gap between two stripes */
  --md-map-icon-size: 16px;            /* the tag icon in a stall, the check, the arrows, a band's icons; an opening's icon reserves it over --md-map-min-scale */
  --md-map-box-pad: 8px;               /* inside a band, before and after its text */
  --md-map-char-w: 6.5px;              /* label-medium's average glyph width: the room a text reserves */
  --md-map-text-line: var(--md-label-medium-line);     /* a text's height on the map (an opening's word too) */
  --md-map-min-scale: 0.6;             /* the smallest fit: a stall still 48 by 24 on screen with its number and icon on one line; below it the map scrolls */
  --md-map-fade-stall: var(--md-opacity-disabled);     /* every other stall once one is picked; a free stall the tag filter leaves out */
  --md-map-fade-drawing: 0.55;         /* the drawing once a stall is picked */

  /* ---- LIST & DROPDOWN MAX HEIGHTS ---- */
  --md-list-max-height: 320px;
  --md-list-max-height-large: 480px;

  /* ---- SCRIM & OVERLAY ---- */
  --md-scrim-light: rgba(0, 0, 0, 0.32);
  --md-scrim-medium: rgba(0, 0, 0, 0.4);
  --md-scrim-dark: rgba(0, 0, 0, 0.5);

  /* ---- STATE LAYERS (M3 Standard Opacity) ---- */
  --md-state-layer-opacity-hover: 0.08;
  --md-state-layer-opacity-focus: 0.12;
  --md-state-layer-opacity-pressed: 0.12;
  --md-state-layer-opacity-dragged: 0.16;
  --md-veil-opacity: 0.86;                     /* the haze over a payment-method tile while its actions show (components.css .billing-pm__veil) */
  --md-opacity-disabled: 0.38;  /* M3 disabled-content opacity */

  /* ---- DIVIDER ---- */
  --md-divider-thickness: 1px;

  /* ---- LAYERS ---- */
  /* The dialog overlay and, above it, the snackbar: an error is always the snackbar (2026-10-29), and a
     dialog that stays open after a refusal shows it over its scrim with the X and the action clickable.
     Everything else stays under the overlay (components.css: the consent banner 1000, the bar 100) */
  --md-z-dialog: 2000;
  --md-z-snackbar: 2100;

  /* ---- DASHBOARD ---- */
  /* The Visitor Activity card's stage (the chart area) is one height in every state (2026-11-01; 22rem
     until then, 43.5rem for a day): 40rem = 640px = the Availability view on the demo garage at scale 1 -
     the plane 508 + the controls' room 96 + the foot 32 = 636, rounded up to the half rem (4px to spare).
     Every card carries the two control rows (the Activity | Availability row is always shown, greyed
     where it cannot apply), so the stage needs nothing given back and no row token (components.css) */
  --md-activity-stage-height: 40rem;
  --md-activity-detail-width: var(--md-component-width-medium);  /* the Availability view's detail panel beside the map from 1024px (2026-10-31): the time picker's sheet and the longest option label fit inside it */

  /* ---- ADDITIONAL SHAPE TOKENS ---- */
  --md-shape-extra-small-half: 2px;  /* Half of extra-small for subtle rounding */
  --md-shape-small-half: 3px;        /* Between extra-small and small */

  /* ---- WARNING COLORS (for alerts, password strength) ---- */
  --md-warning: #FFA726;
  --md-on-warning: #000000;
  --md-warning-container: #3e2723;
  --md-on-warning-container: #FFE0B2;

  /* ---- SEMANTIC COLORS (component-specific) ---- */
  --md-rating-active: #FFB400;  /* Star rating filled state */
  --md-media-background: #000000;  /* Video/media player background */
  --md-state-overlay-light: rgba(0, 0, 0, 0.1);  /* Light overlay for buttons/chips */

  /* ---- HOVER & INTERACTION STATE LAYERS ---- */
  --md-primary-hover-overlay: rgba(0, 123, 54, 0.15);  /* Primary color hover state */

  /* ---- ADDITIONAL SIZING TOKENS ---- */
  /* Small indicators and dots */
  --md-indicator-size-small: 8px;
  --md-indicator-size-medium: 10px;
  --md-indicator-size-large: 16px;

  /* Dropdown/Select arrow dimensions */
  --md-dropdown-arrow-width: 6px;
  --md-dropdown-arrow-height: 10px;

  /* Additional icon sizes (between existing tokens) */
  --md-icon-size-extra-small: 16px;
  --md-icon-size-medium-large: 28px;

  /* Avatar/Profile sizes (specific) */
  --md-avatar-size-small: 28px;
  --md-avatar-size-large: 96px;

  /* Carousel & Navigation button sizes */
  --md-carousel-button-size: 36px;
  --md-carousel-button-size-small: 36px;

  /* List item heights */
  --md-list-item-height-large: 72px;

  /* Skeleton loader dimensions */
  --md-skeleton-text-height: 14px;

  /* Specific component dimensions */
  --md-min-button-width: 112px;
  --md-max-tooltip-width: 200px;
  --md-min-dropdown-width: 100px;
  --md-max-content-height: 1000px;
  --md-scrollable-list-height: 200px;
  --md-textarea-min-height: 96px;
  --md-image-placeholder-height: 200px;
  --md-skeleton-button-width: 100px;
  --md-narrow-component-width: 60px;
  --md-card-min-width: 300px;  /* Responsive grid card minimum width */
  --md-sign-cell-size: 96px;   /* Location sign: one square per code character, at most this wide */

  /* Interactive component dimensions */
  --md-slider-thumb-size: 20px;  /* Slider and range slider thumb size */
  --md-color-preset-size: 32px;  /* Color picker preset button size */

  /* Progress bar & strength indicator */
  --md-progress-bar-height: 4px;

  /* Positioning & spacing adjustments */
  --md-label-offset: calc(var(--md-body-small-line) / -2);  /* Floating label top: half its body-small line above the field, centred on the border */
  --md-dropdown-offset: 8px;  /* Dropdown distance from trigger */
  --md-icon-position-offset: 15px;  /* Icon positioning from edge */

  /* RESPONSIVE BREAKPOINTS (Documentation Only) */
  /* Note: CSS custom properties cannot be used in @media queries */
  /* These values are defined here as the single source of truth for breakpoint values */
  /* Actual usage in responsive.css:
     --md-breakpoint-mobile-small: 480px   → @media (max-width: 480px)
     --md-breakpoint-mobile: 767px         → @media (max-width: 767px)
     --md-breakpoint-tablet: 768px         → @media (min-width: 768px)
     --md-breakpoint-desktop: 1024px       → @media (min-width: 1024px)
     --md-breakpoint-desktop-wide: 1280px  → @media (min-width: 1280px): the public header's link
                                             cluster (components.css, responsive.css) and the portal
                                             shell's expanded rail (layout.css, components.css)
     --md-breakpoint-desktop-xl: 1600px    → @media (min-width: 1600px): the portal shell's docked
                                             assistant pushes the content panel (layout.css,
                                             components.css; M3's extra-large window class)
  */
  --md-breakpoint-mobile-small: 480px;
  --md-breakpoint-mobile: 767px;
  --md-breakpoint-tablet: 768px;
  --md-breakpoint-desktop: 1024px;
  --md-breakpoint-desktop-wide: 1280px;
  --md-breakpoint-desktop-xl: 1600px;

  /* ---- NAVIGATION RAIL ---- */
  --md-nav-rail-width: 80px;
  --md-nav-rail-width-expanded: 256px;

  /* ---- LAYOUT ---- */
  --md-layout-max-width: 1200px;
  --md-header-height: 64px;  /* M3 top app bar height (same as small) */
  --md-content-measure: 42rem;  /* Max comfortable line length for lead paragraphs */

  /* ---- PORTAL SHELL (layout.css .site--portal) ---- */
  /* The charcoal gutter between the chrome (bar, rail, canvas) and the light content panel: a thin frame,
     half of spacing-3 (6px) by the owner's eye, not a layout gap. The rail's side padding and the bar's
     side padding are the same value, so the rows sit centred in the rail column and the bar's buttons end
     on the panel's right edge */
  --md-portal-gutter: calc(var(--md-spacing-3) / 2);
  /* The portal bar's full height: its 40px icon buttons with one spacing-2 of air above and below (56px,
     M3's phone app-bar height and the 56-64px desktop navbar norm, rather than the 64px public header: the
     bar holds only the logo and two buttons) plus the gutter under it. The bar owns that gap, so the logo
     and the buttons are centred in the whole charcoal band above the panel; the rail sticks below it */
  --md-portal-bar-height: calc(var(--md-icon-button-size) + 2 * var(--md-spacing-2) + var(--md-portal-gutter));
  /* The ParkHere Assistant's dock (components.css .assistant-dock; layout.css from 1600px): its width as
     the shell's third column beside the content panel, and as the sheet over the page below that tier -
     the extra-large component width (560px), the floating panel's width before it was docked, over M3's
     400dp side-sheet maximum by the owner's eye (2026-10-22) */
  --md-portal-dock-width: var(--md-component-width-xlarge);
}

/* ---- COLOR ROLES (dark palette) ----
   Palette: leaf green #007b36 (the P mark's disc, OKLCH hue 150, Material tone 45) + #1E1E1E
   (charcoal); on charcoal the green is the same hue at Material tone 80 (#8ed69d), 2026-10-06.
   Declared on :root as the base that [data-theme="light"] overrides for the whole page, and on
   .mk-section--dark: the charcoal bands of the public pages (marketing.css), the site header on every
   page (header.ejs) and the portal rail (nav-rail.ejs). The element declares the same values on itself,
   so everything inside it (stat values, eyebrows, buttons, rows, tooltips, hairlines) recolours
   through the tokens it already uses. Not a plain :root rule on purpose (see above). */
:root,
.mk-section--dark {
  /* Primary */
  --md-primary: #8ed69d;
  --md-on-primary: #003915;
  --md-primary-container: #005222;
  --md-on-primary-container: #aaf3b9;
  --md-primary-glow: rgba(142, 214, 157, 0.3);
  --md-primary-rgb: 142, 214, 157;  /* rgb triplet for alpha fills (heatmap) - mirrors --md-surface-rgb */

  /* Secondary */
  --md-secondary: #b7cbba;
  --md-on-secondary: #233527;
  --md-secondary-container: #394a3c;
  --md-on-secondary-container: #d3e7d6;

  /* Tertiary */
  --md-tertiary: #a3cddc;
  --md-on-tertiary: #043543;
  --md-tertiary-container: #214c5a;
  --md-on-tertiary-container: #bfe9f8;

  /* Accent glows for the solution pages (marketing.css .mk-solution) - same alpha as --md-primary-glow */
  --md-secondary-glow: rgba(183, 203, 186, 0.3);
  --md-tertiary-glow: rgba(163, 205, 220, 0.3);

  /* Error */
  --md-error: #f2b8b5;
  --md-on-error: #601410;
  --md-error-container: #8c1d18;
  --md-on-error-container: #f9dedc;

  /* Surface (tonal elevation based on #1E1E1E) */
  --md-surface: #1E1E1E;
  --md-surface-rgb: 30, 30, 30;
  --md-surface-dim: #141414;
  --md-surface-bright: #3a3a3a;
  --md-surface-container-lowest: #111111;
  --md-surface-container-low: #1a1a1a;
  --md-surface-container: #242424;
  --md-surface-container-high: #2e2e2e;
  --md-surface-container-highest: #383838;
  --md-on-surface: #e6e6e6;
  --md-on-surface-variant: #a0a0a0;
  --md-surface-variant: var(--md-surface-container-high);

  /* Outline */
  --md-outline: #6a6a6a;
  --md-outline-variant: #333333;
  --md-outline-phone: #1a1a1a;

  /* Inverse */
  --md-inverse-surface: #e6e6e6;
  --md-inverse-on-surface: #1E1E1E;
  --md-inverse-primary: #007b36;

  /* Tinted card shadow (public pages): black-based here, green-tinted in the light theme */
  --md-elevation-tinted: var(--md-elevation-2);

  /* The segmented control's thumb (components.css .segmented-button__thumb): lifted above its track in
     either palette - the lightest grey on charcoal (the public drawer's Park | Manage), white on the pages */
  --md-segmented-thumb: var(--md-surface-container-highest);

  /* The parking map's colours by role (components.css .pmap): declared once here, so they resolve
     against each palette's own roles - the light theme on the page root, the dark one inside a charcoal
     band. Never black: the walls are the on-surface-variant grey, the lines the outline grey. The last
     five are the view mode's (the client dashboard's Availability view, 2026-10-31; the number's backing
     2026-11-01). */
  --md-map-bg: var(--md-surface);                        /* the page under the drawing: covers a wall where a door or an opening opens, and the centreline under an opening's icon and word */
  --md-map-free-bg: var(--md-primary-container);         /* a free stall */
  --md-map-picked-bg: var(--md-primary);                 /* the picked stall */
  --md-map-picked-text: var(--md-on-primary);
  --md-map-taken-text: var(--md-outline);                /* the number on a hatched stall, taken or closed */
  --md-map-closed-bg: var(--md-surface-container-low);   /* a taken or closed stall and a hatched band, under their stripes */
  --md-map-closed-stripe: var(--md-outline-variant);     /* the stripes */
  --md-map-band-bg: var(--md-surface-container-low);     /* a building or stairs band */
  --md-map-stall-outline: var(--md-outline);
  --md-map-wall: var(--md-on-surface-variant);           /* the lot outline, the bands, an opening's icon */
  --md-map-line: var(--md-outline);                      /* centrelines, aisle arrows, pillars */
  --md-map-text: var(--md-on-surface);                   /* a stall's number, a band's label */
  --md-map-text-muted: var(--md-on-surface-variant);     /* a door's word, a free label, an opening's word */
  --md-map-track-bg: var(--md-surface-container-lowest); /* a stall's body under the day's bars */
  --md-map-number-bg: var(--md-map-track-bg);            /* the backing under a stall's number over the day's bars (the view mode, 2026-11-01) */
  --md-map-bar-bg: var(--md-primary);                    /* a reservation, running or ahead */
  --md-map-bar-over-bg: var(--md-outline);               /* one that is over */
  --md-map-now: var(--md-on-surface);                    /* the hairline at the present on today's map: a marker, not a state */
}

/* ---- LIGHT THEME OVERRIDES ---- */
[data-theme="light"] {
  /* The key colour: the P mark's disc, Material tone 45 on OKLCH hue 150 (5.2:1 on the page, 3.1:1 on charcoal) */
  --md-primary: #007b36;
  --md-on-primary: #ffffff;
  --md-primary-container: #8ed69d;
  --md-on-primary-container: #002108;
  --md-primary-glow: rgba(0, 123, 54, 0.2);
  --md-primary-rgb: 0, 123, 54;

  --md-secondary: #506353;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #d2e8d6;
  --md-on-secondary-container: #0e1f12;

  --md-tertiary: #3d6471;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #c0e9f9;
  --md-on-tertiary-container: #001f28;

  --md-secondary-glow: rgba(80, 99, 83, 0.2);
  --md-tertiary-glow: rgba(61, 100, 113, 0.2);

  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;

  --md-warning: #F57C00;
  --md-on-warning: #ffffff;
  --md-warning-container: #FFE0B2;
  --md-on-warning-container: #3e2723;

  /* Neutrals: the same hue as the green (OKLCH 150), chroma 0.008 to 0.02, one 0.02 lightness
     step per level, so the surfaces read as green-white rather than grey.
     Cards, chips and callouts on the public pages sit on container-lowest (white). */
  --md-surface: #f7fcf7;
  --md-surface-rgb: 247, 252, 247;
  --md-surface-dim: #d2dfd4;
  --md-surface-bright: #f7fcf7;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #edf7ef;
  --md-surface-container: #e6f0e7;
  --md-surface-container-high: #deeae0;
  --md-surface-container-highest: #d7e4d9;
  --md-on-surface: #181c18;
  --md-on-surface-variant: #414b42;

  --md-outline: #6c806f;
  --md-outline-variant: #c7dbca;

  /* The brand charcoal, so snackbars, tooltips, the consent banner and the portal shell's canvas
     (layout.css .site--portal) match the charcoal bands; keep equal to the dark block's --md-surface */
  --md-inverse-surface: #1E1E1E;
  --md-inverse-on-surface: #e6e6e6;
  --md-inverse-primary: #8ed69d;

  --md-elevation-1: 0 1px 4px 0 rgba(0, 0, 0, 0.12);
  --md-elevation-2: 0 2px 2px 0 rgba(0, 0, 0, 0.08), 0 6px 10px 0 rgba(0, 0, 0, 0.12);
  --md-elevation-3: 0 11px 7px 0 rgba(0, 0, 0, 0.06), 0 13px 25px 0 rgba(0, 0, 0, 0.12);
  --md-elevation-4: 0 14px 12px 0 rgba(0, 0, 0, 0.05), 0 20px 40px 0 rgba(0, 0, 0, 0.12);
  --md-elevation-5: 0 17px 17px 0 rgba(0, 0, 0, 0.04), 0 27px 55px 0 rgba(0, 0, 0, 0.12);
  /* White cards on the public pages: a green-tinted shadow instead of a grey fill */
  --md-elevation-tinted: 0 6px 18px 0 rgba(0, 123, 54, 0.10), 0 1px 2px 0 rgba(15, 59, 28, 0.08);

  --md-segmented-thumb: var(--md-surface-container-lowest);
}

/* The client portal's buttons take the small corner instead of the pill (the owner's rule, 2026-10-28:
   every button - filled, outlined, small, icon, dialog, the assistant's starters - on one radius).
   layout.ejs stamps data-portal on <body> for every portal page, the wizard's and the printable bare
   pages included; the public pages and the end-user app (data-portal="enduser") keep the pill. */
body[data-portal="client"] {
  --md-button-radius: var(--md-shape-small);
}