/* ============================================================================
   Refocus X — Design Pack · tokens.css
   The single source of truth for colour, radius, elevation, type, layout and
   stacking across every Refocus X product.

   USAGE — link this BEFORE any page-local <style>:
     <link rel="stylesheet" href="/design-pack/tokens.css">

   Because it loads first, a page's own :root block still wins. That is
   deliberate: an existing app can adopt this file today and nothing changes
   until it starts deleting its local overrides, one page at a time.

   Every value here is taken from real shipped code. Nothing is invented.
   The reasoning for each ruling is in DECISIONS.md.
   ============================================================================ */

:root {

  /* ── Ink (text) ──────────────────────────────────────────────────────────
     Three steps. Anything below --rx-ink-subtle is not readable on our
     surfaces, so there is no fourth step on purpose. */
  --rx-ink:         #18181b;   /* primary text; also the primary button fill */
  --rx-ink-muted:   #52525b;   /* secondary text, field labels */
  --rx-ink-subtle:  #a1a1aa;   /* hints, placeholders, disabled, timestamps */
  --rx-on-ink:      #ffffff;   /* text ON an --rx-ink fill */
  --rx-ink-hover:   #27272a;   /* hover state of an --rx-ink fill */

  /* ── Surfaces ────────────────────────────────────────────────────────────
     Named by role, not by number, because numbered scales get used
     inconsistently the moment two people touch them. */
  --rx-surface-page:    #fafaf9;   /* the page background */
  --rx-surface-card:    #ffffff;   /* raised: cards, panels, menus, table head */
  --rx-surface-sunken:  #f4f4f5;   /* tints: row hover, chip rest, inset blocks */
  --rx-border:          #e4e4e7;   /* every border and divider. One value. */

  /* ── Brand ───────────────────────────────────────────────────────────────
     The one pair a white-label deployment overrides at runtime. Defaults to
     the ink, so an unbranded install looks deliberate rather than unfinished.
     Set by RX.brand() from a tenant's settings; --rx-brand-on is COMPUTED
     from luminance, never assumed to be white. */
  --rx-brand:     #18181b;
  --rx-brand-on:  #ffffff;

  /* ── Accent (green) ──────────────────────────────────────────────────────
     Three tiers because one green cannot do all three jobs legibly.
     --rx-accent is decorative only — it fails contrast as text on white. */
  --rx-accent:        #4ade80;   /* decorative: logo, spinner, large fills */
  --rx-accent-ui:     #16a34a;   /* UI: borders, switches, focus, small marks */
  --rx-accent-text:   #15803d;   /* text: success copy, links on white */
  --rx-on-accent:     #18181b;   /* text ON an --rx-accent fill */

  /* ── Status ──────────────────────────────────────────────────────────────
     --rx-danger-strong exists for the escalated destructive tier only
     (full wipes, unscoped deletion). See patterns/COMPONENTS.md. */
  --rx-danger:        #dc2626;
  --rx-danger-strong: #991b1b;
  --rx-danger-soft:   #fef2f2;   /* danger-zone card background */
  --rx-on-danger:     #ffffff;
  --rx-warn:          #b45309;
  --rx-warn-strong:   #d97706;   /* reversible-but-serious actions */
  --rx-info:          #2563eb;

  /* ── Category tints ──────────────────────────────────────────────────────
     Background + readable-on-it text, for badges that classify rather than
     alarm (event namespaces, record types). Each pair is contrast-checked;
     use them together, never mix a tint with a different ink. */
  --rx-tint-green:   #dcfce7;  --rx-tint-green-ink:  #15803d;
  --rx-tint-blue:    #e0f2fe;  --rx-tint-blue-ink:   #0369a1;
  --rx-tint-purple:  #f3e8ff;  --rx-tint-purple-ink: #7c3aed;
  --rx-tint-orange:  #ffedd5;  --rx-tint-orange-ink: #c2410c;
  --rx-tint-amber:   #fef3c7;  --rx-tint-amber-ink:  #92400e;

  /* ── Radius ──────────────────────────────────────────────────────────────
     Three steps plus a pill. */
  --rx-radius-sm:    8px;    /* buttons, inputs, chips, small menus */
  --rx-radius:      10px;    /* default: panels, inset blocks, tiles */
  --rx-radius-lg:   14px;    /* cards, modals, big containers */
  --rx-radius-pill: 999px;   /* filter chips, tags, toggles */

  /* ── Scrim ───────────────────────────────────────────────────────────────
     The dim behind an overlay. Two weights: the heavier one for modal
     overlays that take the whole screen, the lighter one for a non-modal
     side panel where the list behind must stay readable. */
  --rx-scrim:      rgba(0,0,0,.45);
  --rx-scrim-soft: rgba(0,0,0,.25);

  /* ── Elevation ───────────────────────────────────────────────────────────
     One shadow per z-band. Do not mix bands. */
  --rx-shadow-sm:     0 1px 3px rgba(0,0,0,.08);
  --rx-shadow:        0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --rx-shadow-pop:    0 8px 24px rgba(0,0,0,.18);
  --rx-shadow-modal:  0 16px 50px rgba(0,0,0,.28);

  /* ── Type ────────────────────────────────────────────────────────────────
     Self-host these. See DECISIONS.md ruling 7. */
  --rx-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --rx-mono: 'DM Mono', ui-monospace, Consolas, monospace;

  /* ── Type scale ──────────────────────────────────────────────────────────
     Taken from the real distribution across a shipped 15,000-line frontend,
     not invented. Usage counts are in DECISIONS.md D12.

     13px is the body size and by far the most used — this is a dense
     information product, not a marketing site. There is deliberately NO step
     below 11px: 10px appears 22 times in the source and is below the
     comfortable reading floor. Do not add one. */
  --rx-text-xs:    11px;   /* hints, micro-labels, timestamps */
  --rx-text-sm:    12px;   /* secondary text, meta rows */
  --rx-text:       13px;   /* BODY. The default for everything. */
  --rx-text-md:    14px;   /* inputs, prominent body, switch labels */
  --rx-text-lg:    16px;   /* subheads */
  --rx-title-sm:   18px;   /* card and section titles */
  --rx-title:      22px;   /* page title — management screens */
  --rx-title-lg:   28px;   /* big numbers: stat values */
  --rx-display:    48px;   /* hero, sign-in only */

  /* ── Layout ──────────────────────────────────────────────────────────────
     Three widths, each with a job. Picking the wrong one is the most common
     layout mistake — see patterns/LAYOUT.md. */
  --rx-content-max: 1040px;   /* reading + management screens. The default. */
  --rx-form-max:     640px;   /* single-column task forms */
  --rx-canvas-max:  1200px;   /* dashboards and multi-column canvases */
  --rx-header-h:      60px;
  --rx-gap:           20px;   /* grid gutter */
  --rx-toast-top:     18px;   /* toast-stack offset from the viewport top.
                                 Apps with fixed/sticky chrome raise it (even
                                 dynamically, from the header's measured
                                 height) so a toast never covers the header —
                                 PageCast's carries its master switch. */

  /* ── Focus ring ──────────────────────────────────────────────────────────
     One ring, used by every focusable control. */
  --rx-focus-ring: 0 0 0 3px rgba(24,24,27,.08);

  /* ── Stacking scale ──────────────────────────────────────────────────────
     NEVER write a raw z-index. Use one of these. The contract that explains
     why the gaps are where they are is in patterns/STACKING.md. */
  --rx-z-sticky:    10;      /* sticky table headers — clippable, in-flow */
  --rx-z-menu:      50;      /* page-local menus inside a container */
  --rx-z-header:   100;      /* the fixed app header */
  --rx-z-dropdown: 200;      /* menus belonging to the header */
  --rx-z-modal:   1000;      /* page modals */
  --rx-z-boot:    9999;      /* boot splash — must outrank page modals */
  --rx-z-popover:10000;      /* body-rendered, fixed, rect-anchored poppers */
  --rx-z-dialog: 11000;      /* shared dialog engine */
  --rx-z-toast:  12000;      /* toasts sit ABOVE dialogs, deliberately */
  --rx-z-expired:13000;      /* session-expired terminal state */
  --rx-z-blocked:99999;      /* access-denied takeover — nothing above this */
}

/* ── Adopting this in an app that already has its own token names? ──────────
   Do not edit this file. Link the matching alias sheet from `compat/` after
   it, and the app's existing `var(--its-own-name)` keeps working unchanged:

     <link rel="stylesheet" href="/design-pack/tokens.css">
     <link rel="stylesheet" href="/design-pack/compat/filedrop.css">

   Alias sheets are per-app and disposable — delete one when its app has
   finished migrating to the --rx-* names. Keeping them here rather than in
   this file means tokens.css stays the standard, not a pile of history.
   ============================================================================ */

/* ============================================================================
   BASE — the three rules every Refocus X app needs. Nothing else is imposed.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--rx-font);
  background: var(--rx-surface-page);
  color: var(--rx-ink);
  margin: 0;
  /* Long unbroken strings — filenames, ids, email addresses — must wrap
     instead of forcing a horizontal scrollbar. This one line prevents a
     whole class of layout bug. */
  overflow-wrap: anywhere;
}

/* ── Layout primitives ─────────────────────────────────────────────────────
   Wrap page content in .rx-page. Put cards in a .rx-grid. Mark a full-bleed
   cell .rx-col-span. That is the entire layout system. */
/* The page-title size travels WITH the width modifier, because in the source
   it always did — 22px on management screens, 24px on task forms, 26px on
   landing pages. That looked like three inconsistent values until the pages
   were grouped by type, at which point it was one rule. See DECISIONS.md D12. */
.rx-page   { width: 100%; max-width: var(--rx-content-max); margin: 0 auto;
             --rx-page-title: var(--rx-title); }
.rx-page--form   { max-width: var(--rx-form-max);   --rx-page-title: 24px; }
.rx-page--canvas { max-width: var(--rx-canvas-max); --rx-page-title: 26px; }

.rx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--rx-gap);
  align-items: start;
}
.rx-grid > .rx-col-span { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .rx-grid { grid-template-columns: 1fr; }
}