/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   The palette is unchanged from the original stylesheet -- #2739b8 brand,
   #ececec surface, #111 ink. What is new is that every value now has one
   definition instead of being repeated (and drifting) across 2400 lines.
   ========================================================================== */

:root {
  /* ---- brand ---------------------------------------------------------- */
  --brand: #2739b8;
  --brand-ink: #1c2a8a;      /* pressed / hover */
  --brand-bright: #3a4cd4;   /* highlights on dark */
  --brand-soft: #eef0fb;     /* tinted fills */
  --brand-border: #c9d0f2;

  /* ---- neutrals ------------------------------------------------------- */
  --surface: #ececec;        /* page background */
  --surface-2: #f5f5f5;
  --card: #ffffff;
  --ink: #111111;            /* primary text */
  --ink-2: #444444;          /* secondary text */
  --muted: #5f6368;          /* meets 4.5:1 on --surface; #777 did not */
  --line: #dddddd;
  --line-strong: #c4c4c4;

  /* ---- status --------------------------------------------------------- */
  --ok: #15803d;
  --ok-soft: #e7f6ec;
  --warn: #a16207;
  --warn-soft: #fff3d8;
  --danger: #b91c1c;
  --danger-soft: #ffe5e5;
  --info: var(--brand);
  --info-soft: var(--brand-soft);

  /* ---- spacing (4px base) --------------------------------------------- */
  --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;

  /* ---- radius --------------------------------------------------------- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-full: 999px;

  /* ---- elevation ------------------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(17, 17, 17, 0.06), 0 1px 3px rgba(17, 17, 17, 0.05);
  --shadow-2: 0 4px 12px rgba(17, 17, 17, 0.08);
  --shadow-3: 0 12px 32px rgba(17, 17, 17, 0.14);
  --shadow-brand: 0 6px 18px rgba(39, 57, 184, 0.28);

  /* ---- type ----------------------------------------------------------- */
  --font: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Arial, sans-serif;

  /* Fluid so a 360px phone and a 768px tablet both read comfortably. */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --text-lg: clamp(1.1875rem, 1.05rem + 0.7vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.25rem);

  --leading-tight: 1.2;
  --leading: 1.55;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;

  /* ---- layout --------------------------------------------------------- */
  /* Widens at each breakpoint (see the overrides at the foot of this file)
     so the app fills a tablet or desktop instead of sitting as a narrow
     phone column stranded in the middle of the screen. */
  --app-max: 30rem;          /* phone-first column */
  --wide-max: 78rem;         /* admin tables */
  --tap: 2.75rem;            /* 44px minimum touch target */

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --nav-height: 4rem;

  /* Width of the desktop side rail that replaces the bottom tab bar. */
  --rail-width: 15rem;

  /* ---- motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --fast: 140ms;
  --normal: 240ms;
  --slow: 360ms;

  /* ---- z-index -------------------------------------------------------- */
  --z-nav: 40;
  --z-header: 50;
  --z-overlay: 60;
  --z-drawer: 70;
  --z-modal: 80;
  --z-toast: 90;
}

/* ==========================================================================
   Responsive layout scale
   --------------------------------------------------------------------------
   48rem / 768px  -- tablet portrait: roomier column, still a touch device so
                     the bottom tab bar stays.
   64rem / 1024px -- desktop and tablet landscape: the tab bar becomes a left
                     rail and the content column widens again.
   ========================================================================== */

@media (min-width: 48rem) {
  :root {
    --app-max: 44rem;
    --nav-height: 4.5rem;
  }
}

/* Beyond this the rail occupies --rail-width, so --app-max is kept below
   (viewport - rail) at every step to guarantee it always fits. */
@media (min-width: 64rem) {
  :root {
    --app-max: 46rem;
  }
}

@media (min-width: 80rem) {
  :root {
    --app-max: 56rem;
  }
}

@media (min-width: 100rem) {
  :root {
    --app-max: 64rem;
    --wide-max: 88rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fast: 0ms;
    --normal: 0ms;
    --slow: 0ms;
  }
}