/* ===================================================== Rewards Design System — Foundations Maps to Flask/Tailwind/Flowbite stack already in base.html - Primary scale = Tailwind 'primary' (green) already wired - Adds: surface scale, status colors, dark/light parity, RTL ===================================================== */ :root { color-scheme: light; /* primary — Last Z hazmat lime */ --p-50:#F7FEE7; --p-100:#ECFCCB; --p-200:#D9F99D; --p-300:#BEF264; --p-400:#A3E635; --p-500:#84CC16; --p-600:#65A30D; --p-700:#4D7C0F; --p-800:#3F6212; --p-900:#365314; --p-950:#1A2E05; /* neutral surface scale — light theme */ --sf-canvas:#F7F8FA; /* page bg */ --sf-surface:#FFFFFF; /* cards */ --sf-surface-2:#F1F3F6; /* inset / table head */ --sf-border:#E4E7EC; --sf-border-strong:#CDD2DA; --sf-text:#0F172A; /* slate-900 */ --sf-text-2:#475569; /* slate-600 */ --sf-text-3:#94A3B8; /* slate-400 */ --sf-text-on-primary:#FFFFFF; /* status */ --st-success:#16A34A; --st-success-bg:#DCFCE7; --st-success-border:#86EFAC; --st-danger:#DC2626; --st-danger-bg:#FEE2E2; --st-danger-border:#FCA5A5; --st-warn:#D97706; --st-warn-bg:#FEF3C7; --st-warn-border:#FCD34D; --st-info:#2563EB; --st-info-bg:#DBEAFE; --st-info-border:#93C5FD; --st-pending:#7C3AED; --st-pending-bg:#EDE9FE; --st-pending-border:#C4B5FD; /* type */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* scale */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; --sh-sm: 0 1px 2px rgba(15,23,42,0.06); --sh-md: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04); --sh-lg: 0 10px 30px -10px rgba(15,23,42,0.18), 0 2px 6px rgba(15,23,42,0.06); --sh-focus: 0 0 0 3px rgba(34,197,94,0.30); } .dark { --sf-canvas:#0B1220; --sf-surface:#111827; --sf-surface-2:#1F2937; --sf-border:#1F2937; --sf-border-strong:#374151; --sf-text:#F1F5F9; --sf-text-2:#CBD5E1; --sf-text-3:#94A3B8; --st-success-bg:rgba(22,163,74,0.15); --st-success-border:rgba(22,163,74,0.4); --st-danger-bg:rgba(220,38,38,0.15); --st-danger-border:rgba(220,38,38,0.4); --st-warn-bg:rgba(217,119,6,0.15); --st-warn-border:rgba(217,119,6,0.4); --st-info-bg:rgba(37,99,235,0.15); --st-info-border:rgba(37,99,235,0.4); --st-pending-bg:rgba(124,58,237,0.15); --st-pending-border:rgba(124,58,237,0.4); /* Foreground colours: the default :root values (#DC2626 etc.) read OK at AA but are visually muted against the deep dark canvas. Lift each status colour by ~2 shades so the pill / button text stays vivid in dark mode without losing semantic meaning. */ --st-success:#4ADE80; --st-danger:#F87171; --st-warn:#FBBF24; --st-info:#60A5FA; } /* Dark mode override — gunmetal / concrete vibe */ .dark { color-scheme: dark; --sf-canvas:#0A0E0A; --sf-surface:#121712; --sf-surface-2:#1B221B; --sf-border:#1F2A1F; --sf-border-strong:#374237; } :root { --sh-focus: 0 0 0 3px rgba(132,204,22,0.30); } /* Native 's UA stylesheet resets `color: CanvasText` and `background-color: Canvas`, which Chromium paints as black-on-white when `color-scheme` isn't declared on the host doc — making every modal that doesn't set its own `color` unreadable in dark mode (titles, table cells, 
 blocks).  Reset both to design tokens
   so any text inside a dialog inherits the active theme by default.
   Per-dialog inline overrides (background: transparent on the
   dashboard's card-wrapped dialogs) continue to win via specificity. */
dialog {
  color: var(--sf-text);
  background: var(--sf-surface);
}

/* ─── Base reset for the doc itself ─── */
.ds-page {
  font-family: var(--font-sans);
  background: var(--sf-canvas);
  color: var(--sf-text);
  -webkit-font-smoothing: antialiased;
  /* Sticky-footer scaffolding: page is a flex column at least as tall
     as the viewport. The site footer sits at the end of the column;
     `margin-block-start: auto` on `.lz-site-footer` (set in lastz.css)
     pushes it to the bottom when content is shorter than the viewport.
     Without this, the footer floats up against short pages (e.g.
     /admin/cache, /admin/page-alerts) and leaves a blank gap below. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* RTL helpers — most spacing flips naturally via logical properties */
[dir="rtl"] .ds-flip { transform: scaleX(-1); }

/* ─── Type ─── */
.t-display { font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }
.t-h1      { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.t-h2      { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
.t-h3      { font-size: 17px; line-height: 1.35; font-weight: 600; }
.t-body    { font-size: 14px; line-height: 1.55; }
.t-sm      { font-size: 13px; line-height: 1.5; color: var(--sf-text-2); }
.t-xs      { font-size: 11.5px; line-height: 1.4; color: var(--sf-text-3); letter-spacing: 0.02em; }
.t-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-text-3); }
.t-mono    { font-family: var(--font-mono); }
.t-num     { font-variant-numeric: tabular-nums; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-md);
  font: 500 14px/1 var(--font-sans);
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
  white-space: nowrap;
  /* `min-height: 44px` (set in lastz.css mobile rule for WCAG 2.5.5)
     was being treated as a content-area floor instead of a border-box
     floor, so padding+border stacked on top — `.btn-lg` rendered at
     ~69-70px tall on mobile instead of the intended ~44px. */
  box-sizing: border-box;
  /* `.btn` is used on both