/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #030b0b #233330 #f6f4ef #164f4b #1f6f6a #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

:root {
  --canvas: #f6f4ef;
  --surface: #fbfaf8;
  --surface-2: #eae8e4;
  --border: #d4d3cf;
  --border-strong: #adaeab;
  --ink: #233330;
  --muted: #646d69;
  --accent: #164f4b;
  --accent-hover: #134340;
  --accent-ink: #ffffff;
  --accent-text: #1f6f6a;
  --accent-strong: #164f4b;
  --accent-soft: #d7ddd8;
  --accent-border: #91aaa5;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dbe6da;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #eee1d3;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #efdad6;
  --danger-strong: #b91c1c;}

/* ====================================================================
 * app.css — THIS APP'S OWN CSS. Yours to write. Ships empty.
 *
 * design.css is a FLOOR, not a ceiling.
 *
 * For a long time it was both, and the cost was measurable: an app could
 * not write a single CSS rule, so every app built here had the same 10px
 * radius, the same Public Sans at the same 15px, the same 1px borders and
 * the same soft shadow. Only fourteen COLOUR tokens ever differed. Three
 * apps in a row came out looking like the same product in three coats of
 * paint, which is what this file exists to end.
 *
 * It loads AFTER design.css and theme.css, so anything here wins.
 *
 * ---- THE FIRST LEVER: RETUNE THE SYSTEM ---------------------------
 *
 * A :root block here re-tunes every component at once — nothing is
 * restyled one class at a time. These are the tokens that decide an app's
 * CHARACTER, and they are the fastest way to make two apps look nothing
 * alike:
 *
 *   --radius-sm --radius --radius-lg   0 is brutal, 4 is crisp, 18 is soft
 *   --font-sans --font-mono            a display face changes more than colour
 *   --t-xs … --t-5xl                   the type scale, and how far it ramps
 *   --lh --lh-tight --track-tight      density and tone
 *   --s-1 … --s-12                     the spacing scale: tight or generous
 *   --shadow --shadow-raised           flat, or lifted
 *   --border --border-strong widths    hairline, or heavy and drawn
 *   --dur-1 --dur-2 --ease             brisk, or languid
 *   --content-max --measure            a wide dashboard or a narrow reading page
 *
 * COLOUR IS THE ONE EXCEPTION, and it is not a technicality: the owner
 * picked the palette on the approval card before you built anything, and
 * it is the only part of the look they chose themselves. theme.css holds
 * it. Write var(--accent), var(--ink), var(--canvas) — never a hex, an
 * rgb() or an hsl(), here or anywhere. The validator refuses those.
 *
 * ---- THE SECOND LEVER: WRITE WHAT IS NOT THERE ---------------------
 *
 * design.css covers the ordinary furniture. It does NOT cover the one
 * screen that makes this app itself — a timer's dial, a board's columns,
 * a chart, a seating plan, a game grid. Write those here, in full, and
 * name them for what they are (.dial, .board-col), never .card-2.
 *
 * Compose the primitives where they fit and write your own where they do
 * not. An app that used only the frozen classes and added nothing shipped
 * 160 component classes and zero rules of its own — and read as generated,
 * because the system's ceiling had become the app's ceiling.
 *
 * Keep using the tokens in what you write. A rule built on var(--s-4) and
 * var(--radius) stays consistent with everything around it and follows the
 * app when its character changes; one built on 16px and 10px does not.
 * ==================================================================== */

/* Connect My Driver: a calm, trustworthy chauffeur service — quieter radii,
   a slightly wider measure for the booking copy, and a steadier type ramp
   than the system default so numbers (fares, durations) read cleanly. */
:root {
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-raised: 0 16px 40px -20px color-mix(in srgb, var(--ink) 35%, transparent);
  --content-max: 1180px;
}

.brand-mark {
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

/* The hero band's ghost button needs a border that reads on the gradient
   without ever naming a colour of its own — mixed from the token already in
   play there. */
.topbar .brand-name {
  letter-spacing: -0.01em;
}

/* Avatar initials in the driver picker should feel like a badge, not a
   default circle — tie it to the accent so "this is me" reads as an
   identity, not a form control. */
.avatar {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: var(--fw-semi);
}

/* Numeric columns (fares, durations, ratings) line up on a mono figure so a
   dispatcher can scan a column of rupee amounts at a glance. */
.nums {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}