/* Dotsie design system — tokens v2.1.0
 *
 * Three tiers. Components use tier 2 and 3 only; tier 1 exists to feed tier 2.
 *   1. Primitives  --wt-color-*            raw palette, never themed, never used by components
 *   2. Semantic    --wt-surface-*, --wt-text-*, --wt-border-*, --wt-route-*, ...   themed by role
 *   3. Scales      --wt-space-*, --wt-radius-*, --wt-type-*, --wt-shadow-*, ...   shared by every theme
 *
 * Theming: light on :root; dark follows the OS unless the page sets data-theme="light" | "dark".
 */

/* ---------- 1. Primitives ---------- */
:root {
  /* Neutrals: one warm grey (OKLCH hue 90, chroma .0035, so the sheet reads as paper, not steel), stepped by lightness.
     Fine steps at both ends, for surfaces and lines; wide steps in the middle, where each one is an ink with its own
     contrast and its own rank. The number is the step, not a percentage. On white (light) and on gray-900 (dark):
       ink 1  950 18:1  /  100 15:1    names, titles: read first
       ink 2  600  7:1  /  350  8:1    times, notes: read next (AAA)
       ink 3  500  5:1  /  450  5:1    drives, detail: there when you look (AA on every surface)
       ink 4  400 2.6:1 /  600 2.4:1   what's over, placeholders: out of the way
     Below those, lines and surfaces. At the far end are the blacks: 950 is the strongest ink and the primary button,
     1000 the dark theme's page. */
  --wt-color-gray-0: #ffffff;
  --wt-color-gray-50: #f9f8f5;
  --wt-color-gray-100: #f3f2f0;
  --wt-color-gray-150: #ecebe8;
  --wt-color-gray-200: #e4e3e0;
  --wt-color-gray-250: #dad9d6;
  --wt-color-gray-300: #cdccc9;
  --wt-color-gray-350: #b6b6b3;
  --wt-color-gray-400: #a1a09d;
  --wt-color-gray-450: #908f8d;
  --wt-color-gray-500: #6c6c69;
  --wt-color-gray-600: #575754;
  --wt-color-gray-700: #444442;
  --wt-color-gray-750: #373735;
  --wt-color-gray-800: #2d2c2b;
  --wt-color-gray-850: #252422;
  --wt-color-gray-900: #1c1c1a;
  --wt-color-gray-950: #141412;
  --wt-color-gray-1000: #0c0b09;

  /* Blue is reserved for routes and links. */
  --wt-color-blue-100: #e3ecfd;
  --wt-color-blue-200: #c3d4f2;
  --wt-color-blue-300: #9dbbec;
  --wt-color-blue-400: #8ab4f8;
  --wt-color-blue-500: #1a73e8;
  --wt-color-blue-600: #0b57d0;
  --wt-color-blue-800: #243a5e;

  /* Red is reserved for "doesn't fit" and destructive actions: the loudest color, for the one thing to fix. */
  --wt-color-red-50: #fdecea;
  --wt-color-red-300: #fb817c;
  --wt-color-red-600: #c5221f;
  --wt-color-red-900: #3a1d1b;

  /* Identity colors for people. Each passes 4.5:1 with white initials. */
  --wt-color-identity-1: #2563eb;
  --wt-color-identity-2: #c2410c;
  --wt-color-identity-3: #0f766e;
  --wt-color-identity-4: #7c3aed;
  --wt-color-identity-5: #be185d;
  --wt-color-identity-6: #4d7c0f;
}

/* ---------- 2. Semantic roles (light) ---------- */
:root {
  /* Surfaces, back to front */
  --wt-surface-page: var(--wt-color-gray-100);      /* behind the app column on wide screens */
  --wt-surface-sheet: var(--wt-color-gray-100);     /* the list sheet over the map */
  --wt-surface-raised: var(--wt-color-gray-0);      /* stop cards, modal sheets, inputs on focus */
  --wt-surface-sunken: var(--wt-color-gray-50);     /* resting inputs */
  --wt-surface-hover: var(--wt-color-gray-200);     /* pressed / hovered quiet controls */
  --wt-surface-current: var(--wt-color-gray-200);   /* the one highlighted timeline row: selected, or else now */
  --wt-surface-inverse: var(--wt-color-gray-850);  /* toasts */
  --wt-surface-map: #e9eef1;                        /* map placeholder before tiles load */

  /* Text: four inks, one per rank (see the neutrals above). The first three pass 4.5:1 on raised, sheet and sunken
     surfaces; on the highlighted row (--wt-surface-current) tertiary steps up to secondary.
     Past text is the fourth: what's over, out of the way. */
  --wt-text-primary: var(--wt-color-gray-950);     /* names, titles, what you typed */
  --wt-text-secondary: var(--wt-color-gray-600);   /* times, notes, labels: read, but after the name */
  --wt-text-tertiary: var(--wt-color-gray-500);    /* drives, AM / PM, hints: there when you look for it */
  --wt-text-past: var(--wt-color-gray-400);         /* rows that are over */
  --wt-text-placeholder: var(--wt-color-gray-400);
  --wt-text-inverse: var(--wt-color-gray-0);
  --wt-text-inverse-secondary: var(--wt-color-gray-300); /* a toast's detail line */
  --wt-text-inverse-danger: var(--wt-color-red-300);    /* an error toast's icon */
  --wt-text-inverse-action: var(--wt-color-blue-400);
  --wt-text-link: var(--wt-color-blue-500);
  --wt-text-danger: var(--wt-color-red-600);

  /* Lines */
  --wt-border-subtle: rgba(0, 0, 0, .06);           /* card hairlines */
  --wt-border-default: var(--wt-color-gray-150);    /* input borders */
  --wt-border-strong: var(--wt-color-gray-300);     /* grab handle (decorative) */
  --wt-border-rail: var(--wt-color-gray-250);       /* the day's timeline rail: still there on a grey row */
  --wt-border-focus: var(--wt-color-gray-950);      /* focused input, selected card */

  /* Actions */
  --wt-action-primary: var(--wt-color-gray-950);
  --wt-action-primary-text: var(--wt-color-gray-0);
  --wt-action-secondary: var(--wt-color-gray-0);
  --wt-action-secondary-text: var(--wt-color-gray-950);

  /* Routes and pins (map) */
  --wt-route: var(--wt-color-blue-500);
  --wt-route-active: var(--wt-color-blue-600);
  --wt-route-muted: var(--wt-color-blue-300);       /* other routes while one is active */
  --wt-route-done: var(--wt-color-gray-350);       /* past routes: the same grey as what's over in the list */
  --wt-route-casing: var(--wt-color-gray-0);        /* outline under route lines */
  --wt-pin-fill: var(--wt-color-gray-0);

  /* Status, loudest first: red needs fixing; black is now; grey is over. */
  --wt-danger: var(--wt-color-red-600);
  --wt-action-danger: var(--wt-color-red-600);       /* the confirm button of a dialog that destroys something */
  --wt-action-danger-text: var(--wt-color-gray-0);
  --wt-danger-surface: var(--wt-color-red-50);
  --wt-highlight: #fff1b8;                          /* a co-editor's change, flashed once */
  --wt-now: var(--wt-color-gray-950);               /* the ring on the stop you're at, the car on the drive you're on: the blackest ink */

  /* Stop types: a color of its own for each of the eleven types, on markers and pins, so no two types look alike.
     The colors follow maps apps where they can: food orange, coffee brown, hotels purple, nature green, shopping
     yellow, museums pink. Airports and gas, blue in maps apps, are indigo and petrol, because blue is the route's;
     nothing is red, which means doesn't fit. Each is as vivid as its hue allows (OKLCH C up to .21; .18 in dark) at
     about one lightness (L .62; .74 in dark), so no type outranks another; brown, petrol, green and indigo sit a little
     deeper to stay apart from their neighbors. --wt-marker-ink meets 3:1 on every one. Place stays a neutral. */
  --wt-kind-place: #78746d;
  --wt-kind-hotel: #b24acf;
  --wt-kind-airport: #7250e2;
  --wt-kind-gas: #0a6783;
  --wt-kind-restaurant: #d65b0f;
  --wt-kind-cafe: #89552a;
  --wt-kind-attraction: #139996;
  --wt-kind-viewpoint: #789310;
  --wt-kind-nature: #0e844c;
  --wt-kind-museum: #df3c8c;
  --wt-kind-shopping: #a98410;
  /* The logo's dots are stops, in the app's own pin colors, and follow them into dark mode: the colon of :D, an
     attraction's color over a restaurant's, and the wordmark's dot on the i, the restaurant's again, the brightest of
     the two. Only the logo and the wordmark use these. */
  --wt-brand-dot-top: var(--wt-kind-attraction);
  --wt-brand-dot-bottom: var(--wt-kind-restaurant);
  --wt-brand-dot-i: var(--wt-kind-restaurant);
  --wt-kind-drive: var(--wt-color-gray-450);        /* the car on a drive: quieter than any stop */
  --wt-kind-drive-current: var(--wt-color-gray-700); /* the car on the selected drive: a step darker */
  --wt-kind-past: var(--wt-color-gray-350);         /* markers, cars and pins of what's over: the color drains out */
  --wt-marker-ink: var(--wt-color-gray-0);          /* the icon on a marker, the number on a pin, the car on a drive */
  /* The gradient on a stop's marker and pin, as on a maps app's: built from the marker's own color in OKLCH, a little
     lighter and richer at the top and a little darker at the bottom, with the same hue all the way down. Never a white
     or black overlay: those wash the color out at the top and muddy it at the bottom. Lift and sink are OKLCH
     lightness; boost multiplies chroma at the top. Gentle enough that --wt-marker-ink stays at 3:1 across the icon. */
  --wt-marker-lift: .06;
  --wt-marker-sink: .07;
  --wt-marker-boost: 1.15;
  /* A pin stepping back while another is selected: still solid, in a lighter (in dark mode, deeper) version of its
     color, this much of it over --wt-pin-fill, with its number in its own color, darker (lighter in dark mode) by this
     much OKLCH lightness so it stays at 3:1. Solid, so the route and the map don't show through it. */
  --wt-pin-faded-mix: 45%;
  --wt-pin-faded-ink-lift: -.2;

  /* Overlays and shadows */
  --wt-overlay: rgba(0, 0, 0, .32);
  --wt-shadow-color: rgba(0, 0, 0, .14);

  /* People */
  --wt-identity-1: var(--wt-color-identity-1);
  --wt-identity-2: var(--wt-color-identity-2);
  --wt-identity-3: var(--wt-color-identity-3);
  --wt-identity-4: var(--wt-color-identity-4);
  --wt-identity-5: var(--wt-color-identity-5);
  --wt-identity-6: var(--wt-color-identity-6);
  --wt-identity-text: var(--wt-color-gray-0);

  color-scheme: light;
}

/* ---------- 2b. Semantic roles (dark) ----------
 * The same role values appear twice: once for "follow the OS", once for an explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wt-surface-page: var(--wt-color-gray-1000);
    --wt-surface-sheet: var(--wt-color-gray-950);
    --wt-surface-raised: var(--wt-color-gray-900);
    --wt-surface-sunken: var(--wt-color-gray-850);
    --wt-surface-hover: var(--wt-color-gray-800);
    --wt-surface-current: var(--wt-color-gray-750);
    --wt-surface-inverse: var(--wt-color-gray-100);
    --wt-surface-map: #1d2226;
    --wt-text-primary: var(--wt-color-gray-100);
    --wt-text-secondary: var(--wt-color-gray-350);
    --wt-text-tertiary: var(--wt-color-gray-450);
    --wt-text-past: var(--wt-color-gray-600);
    --wt-text-placeholder: var(--wt-color-gray-500);
    --wt-text-inverse: var(--wt-color-gray-950);
  --wt-text-inverse-secondary: var(--wt-color-gray-600);
  --wt-text-inverse-danger: var(--wt-color-red-600);
    --wt-text-inverse-action: var(--wt-color-blue-600);
    --wt-text-link: var(--wt-color-blue-400);
    --wt-text-danger: var(--wt-color-red-300);
    --wt-border-subtle: rgba(255, 255, 255, .08);
    --wt-border-default: var(--wt-color-gray-800);
    --wt-border-strong: var(--wt-color-gray-600);
    --wt-border-rail: var(--wt-color-gray-700);
    --wt-border-focus: var(--wt-color-gray-100);
    --wt-action-primary: var(--wt-color-gray-100);
    --wt-action-primary-text: var(--wt-color-gray-950);
    --wt-action-secondary: var(--wt-color-gray-900);
    --wt-action-secondary-text: var(--wt-color-gray-100);
    --wt-route: var(--wt-color-blue-400);
    --wt-route-active: #aecbfa;
    --wt-route-muted: var(--wt-color-blue-800);
    --wt-route-done: var(--wt-color-gray-600);
    --wt-route-casing: var(--wt-color-gray-950);
    --wt-pin-fill: var(--wt-color-gray-950);
    --wt-danger: var(--wt-color-red-300);
  --wt-action-danger: var(--wt-color-red-300);
  --wt-action-danger-text: var(--wt-color-gray-950);
    --wt-danger-surface: var(--wt-color-red-900);
    --wt-highlight: #4a3f12;
    --wt-now: var(--wt-color-gray-100);
    --wt-kind-place: #b4b0aa;
    --wt-kind-hotel: #d785ef;
    --wt-kind-airport: #8c80ee;
    --wt-kind-gas: #3292b3;
    --wt-kind-restaurant: #fd862e;
    --wt-kind-cafe: #aa7b54;
    --wt-kind-attraction: #1ed1cd;
    --wt-kind-viewpoint: #b6dd1e;
    --wt-kind-nature: #17b55f;
    --wt-kind-museum: #f96da4;
    --wt-kind-shopping: #edbe1c;
    --wt-kind-drive: var(--wt-color-gray-500);
    --wt-kind-drive-current: var(--wt-color-gray-300);
    --wt-kind-past: var(--wt-color-gray-600);
    --wt-marker-ink: var(--wt-color-gray-950);
    --wt-marker-lift: .05;
    --wt-marker-sink: .04;
    --wt-pin-faded-ink-lift: .08;
    --wt-overlay: rgba(0, 0, 0, .55);
    --wt-shadow-color: rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --wt-surface-page: var(--wt-color-gray-1000);
  --wt-surface-sheet: var(--wt-color-gray-950);
  --wt-surface-raised: var(--wt-color-gray-900);
  --wt-surface-sunken: var(--wt-color-gray-850);
  --wt-surface-hover: var(--wt-color-gray-800);
  --wt-surface-current: var(--wt-color-gray-750);
  --wt-surface-inverse: var(--wt-color-gray-100);
  --wt-surface-map: #1d2226;
  --wt-text-primary: var(--wt-color-gray-100);
  --wt-text-secondary: var(--wt-color-gray-350);
  --wt-text-tertiary: var(--wt-color-gray-450);
  --wt-text-past: var(--wt-color-gray-600);
  --wt-text-placeholder: var(--wt-color-gray-500);
  --wt-text-inverse: var(--wt-color-gray-950);
  --wt-text-inverse-secondary: var(--wt-color-gray-600);
  --wt-text-inverse-danger: var(--wt-color-red-600);
  --wt-text-inverse-action: var(--wt-color-blue-600);
  --wt-text-link: var(--wt-color-blue-400);
  --wt-text-danger: var(--wt-color-red-300);
  --wt-border-subtle: rgba(255, 255, 255, .08);
  --wt-border-default: var(--wt-color-gray-800);
  --wt-border-strong: var(--wt-color-gray-600);
  --wt-border-rail: var(--wt-color-gray-700);
  --wt-border-focus: var(--wt-color-gray-100);
  --wt-action-primary: var(--wt-color-gray-100);
  --wt-action-primary-text: var(--wt-color-gray-950);
  --wt-action-secondary: var(--wt-color-gray-900);
  --wt-action-secondary-text: var(--wt-color-gray-100);
  --wt-route: var(--wt-color-blue-400);
  --wt-route-active: #aecbfa;
  --wt-route-muted: var(--wt-color-blue-800);
  --wt-route-done: var(--wt-color-gray-600);
  --wt-route-casing: var(--wt-color-gray-950);
  --wt-pin-fill: var(--wt-color-gray-950);
  --wt-danger: var(--wt-color-red-300);
  --wt-action-danger: var(--wt-color-red-300);
  --wt-action-danger-text: var(--wt-color-gray-950);
  --wt-danger-surface: var(--wt-color-red-900);
  --wt-highlight: #4a3f12;
  --wt-now: var(--wt-color-gray-100);
  --wt-kind-place: #b4b0aa;
  --wt-kind-hotel: #d785ef;
  --wt-kind-airport: #8c80ee;
  --wt-kind-gas: #3292b3;
  --wt-kind-restaurant: #fd862e;
  --wt-kind-cafe: #aa7b54;
  --wt-kind-attraction: #1ed1cd;
  --wt-kind-viewpoint: #b6dd1e;
  --wt-kind-nature: #17b55f;
  --wt-kind-museum: #f96da4;
  --wt-kind-shopping: #edbe1c;
  --wt-kind-drive: var(--wt-color-gray-500);
  --wt-kind-drive-current: var(--wt-color-gray-300);
  --wt-kind-past: var(--wt-color-gray-600);
  --wt-marker-ink: var(--wt-color-gray-950);
  --wt-marker-lift: .05;
  --wt-marker-sink: .04;
  --wt-pin-faded-ink-lift: .08;
  --wt-overlay: rgba(0, 0, 0, .55);
  --wt-shadow-color: rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ---------- 3. Scales (theme-independent) ---------- */
:root {
  /* Type: the system face, so the app feels native on every phone. */
  --wt-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --wt-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* font shorthands: weight size/line-height family
   * Four weights, each with a job, so emphasis stays rare: 700 the app name only; 600 headings and the one
   * primary action; 500 names, the strongest text in a list; 400 everything else. Below the names, hierarchy
   * comes from size and ink (--wt-text-secondary, --wt-text-tertiary), not from more weight. */
  --wt-type-display: 700 28px/34px var(--wt-font-sans);   /* app name on Home */
  --wt-type-title: 600 18px/24px var(--wt-font-sans);     /* modal titles */
  --wt-type-context: 500 15px/20px var(--wt-font-sans);   /* where you are: the trip's name, the day. Below the stop names */
  --wt-type-heading: 600 15px/20px var(--wt-font-sans);   /* section headings */
  --wt-type-name: 500 16px/21px var(--wt-font-sans);      /* stop and trip names */
  --wt-type-body: 400 15px/21px var(--wt-font-sans);      /* running text */
  --wt-type-time: 400 15px/21px var(--wt-font-sans);      /* stop times (use tabular-nums) */
  --wt-type-label: 500 14px/20px var(--wt-font-sans);     /* buttons, pin labels */
  --wt-type-caption: 400 13px/18px var(--wt-font-sans);   /* notes, field labels, hints */
  --wt-type-caption-strong: 500 13px/18px var(--wt-font-sans); /* a late drive's "Arrives 13 min late" */
  --wt-type-micro: 500 11px/14px var(--wt-font-sans);     /* AM / PM, avatar initials */
  --wt-type-input: 400 16px/22px var(--wt-font-sans);     /* 16px stops iOS zooming into fields */
  --wt-type-overline: 600 12px/16px var(--wt-font-sans);  /* day headings on the overview, in capitals */
  --wt-tracking-display: -.02em;
  --wt-tracking-caps: .06em;                               /* text in capitals */

  /* Space: a 4px grid */
  --wt-space-1: 4px;
  --wt-space-2: 8px;
  --wt-space-3: 12px;
  --wt-space-4: 16px;
  --wt-space-5: 20px;
  --wt-space-6: 24px;
  --wt-space-8: 32px;
  --wt-space-10: 40px;

  /* Radius */
  --wt-radius-sm: 8px;      /* pin labels */
  --wt-radius-md: 12px;     /* cards, inputs, block buttons */
  --wt-radius-lg: 18px;     /* sheets */
  --wt-radius-pill: 999px;  /* buttons, drive chips, toasts */
  --wt-radius-round: 50%;   /* avatars, markers, icon buttons */

  /* Sizes */
  --wt-size-touch: 44px;    /* minimum height of anything tapped often */
  --wt-size-icon-btn: 40px;
  --wt-size-avatar: 26px;
  --wt-size-icon: 22px;
  --wt-size-column: 480px;  /* app column width on large screens */
  --wt-size-panel: clamp(360px, 30vw, 440px);  /* the plan's side panel, from 768px wide */
  --wt-size-trip-head: 44px;  /* the trip header card */

  /* Elevation: by role, never decoration */
  --wt-shadow-hairline: 0 0 0 1px var(--wt-border-subtle);
  --wt-shadow-sheet: 0 -2px 16px var(--wt-shadow-color);
  --wt-shadow-float: 0 1px 4px var(--wt-shadow-color);
  --wt-shadow-card: 0 2px 10px var(--wt-shadow-color);   /* the trip header, floating over the map */
  --wt-shadow-pin: 0 1px 3px rgba(0, 0, 0, .35);
  --wt-shadow-pin-selected: 0 3px 6px rgba(0, 0, 0, .35);  /* the selected pin, standing higher off the map */

  /* Motion */
  --wt-duration-fast: 150ms;
  --wt-duration-base: 250ms;
  --wt-duration-flash: 2400ms;
  --wt-ease-out: cubic-bezier(.2, .8, .2, 1);

  /* Layers */
  --wt-z-raised: 1;
  --wt-z-sheet: 500;        /* above the map's pins and sights */
  --wt-z-modal: 1000;
  --wt-z-dialog: 1500;      /* a confirmation, over any sheet */
  --wt-z-toast: 2000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wt-duration-fast: 0ms;
    --wt-duration-base: 0ms;
    --wt-duration-flash: 0ms;
  }
}