/* Shared design tokens. Loaded by every page (splash, login, billing, profile, app).
 *
 * Brand palette pulled from Haul (cc/project/tokens.css). The `--brand-teal*`
 * aliases at the bottom exist so the existing app.css keeps compiling — new
 * components should use the `--haul-*` names directly.
 */
:root {
  /* Type — system stack only; the CSP blocks external font CDNs and the
   * native font is plenty for this surface. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Brand */
  --haul-teal:        #1CA69A;   /* primary brand */
  --haul-teal-bright: #16B9AC;   /* hero gradients */
  --haul-teal-soft:   #E6F6F4;   /* tinted surfaces */
  --haul-teal-deep:   #007052;   /* discounted price / "buy" green */

  /* Status accents */
  --haul-orange:      #FF522C;
  --haul-orange-soft: #FFE9E2;
  --haul-yellow:      #FFB119;
  --haul-yellow-soft: #FFF2D6;
  --haul-purple:      #6C5CE7;
  --haul-purple-soft: #EFEDFF;

  /* Neutrals */
  --ink-900: #1D1D1F;
  --ink-700: #303030;
  --ink-500: #606060;
  --ink-400: #909090;
  --ink-300: #C8C8C8;
  --line:    #ECECEC;
  --line-2:  #F3F3F3;
  --surface: #FFFFFF;
  --canvas:  #F4F4F7;

  /* Radii / shadows */
  --r-card: 20px;
  --r-pill: 999px;
  --r-sm:   10px;
  --r-md:   14px;
  --shadow-card: 0 1px 2px rgba(20,20,40,.04), 0 8px 24px rgba(20,20,40,.05);
  --shadow-soft: 0 1px 2px rgba(20,20,40,.04), 0 2px 8px rgba(20,20,40,.04);

  /* Legacy aliases — kept in lockstep with --haul-teal so app.css and the
   * existing auth/billing CSS keep working without per-rule renames. */
  --brand-teal:       #1CA69A;
  --brand-teal-hover: #16B9AC;
  --brand-teal-rgb:   28, 166, 154;
}

.haul {
  font-family: var(--font);
  color: var(--ink-900);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Box-sizing reset for pages that don't load base.css (currently just the
 * splash). base.css applies its own stronger reset for app/auth pages. */
.splash *,
.splash *::before,
.splash *::after { box-sizing: border-box; }