/* Reco Desk design tokens — build 96.
   One sheet for the client app ("Reco Desk Client") and the staff app redesign.
   Dark theme is the default; <html data-theme="light"> switches to light. No web fonts, no CDN: works offline.
   Text colours are chosen for WCAG AA (4.5:1) on the glass surfaces of each theme.

   Use:
     <link rel="stylesheet" href="theme.css">  (or inline it)
     surfaces  .rd-glass, .rd-glass-strong, .rd-panel
     controls  .rd-btn, .rd-btn--primary, .rd-btn--ghost, .rd-input, .rd-chip, .rd-tabs
     status    .rd-tag--ok | --due | --late | --info | --muted     (filed / due soon / overdue / info)
*/

:root {
  /* type: Windows 11 ships Segoe UI Variable, Windows 10 Segoe UI; Inter / system fonts elsewhere */
  --rd-font: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --rd-font-display: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif;
  --rd-font-mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
  --rd-fs-xs: 12px; --rd-fs-sm: 13px; --rd-fs-md: 14.5px; --rd-fs-lg: 17px; --rd-fs-xl: 22px; --rd-fs-2xl: 30px; --rd-fs-3xl: 44px;
  --rd-lh: 1.5;

  /* space / shape */
  --rd-s1: 4px; --rd-s2: 8px; --rd-s3: 12px; --rd-s4: 16px; --rd-s5: 24px; --rd-s6: 32px; --rd-s7: 48px;
  --rd-r-sm: 8px; --rd-r-md: 12px; --rd-r-lg: 18px; --rd-r-xl: 26px; --rd-r-pill: 999px;
  --rd-blur: 18px;
  --rd-ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- dark (default) ---- */
  color-scheme: dark;
  --rd-bg-0: #0a1030;                     /* deep navy */
  --rd-bg-1: #1a1458;                     /* indigo */
  --rd-bg-2: #3b1d6e;                     /* violet */
  --rd-bg-3: #0c5a63;                     /* teal */
  --rd-bg: radial-gradient(1100px 700px at 8% -10%, rgba(91, 76, 255, .55), transparent 60%),
           radial-gradient(900px 640px at 105% 10%, rgba(20, 184, 166, .38), transparent 60%),
           radial-gradient(900px 700px at 60% 120%, rgba(147, 51, 234, .40), transparent 62%),
           linear-gradient(160deg, var(--rd-bg-0) 0%, var(--rd-bg-1) 45%, #22125a 70%, #0b2a4a 100%);
  --rd-bg-solid: #120f3d;                 /* fallback / window background */

  --rd-ink: #f3f4ff;                      /* body text  (>= 12:1 on glass) */
  --rd-ink-2: #c9cdf2;                    /* secondary  (>= 8:1) */
  --rd-ink-3: #a3a9d9;                    /* tertiary / labels (>= 5:1 on the darkest glass) */
  --rd-ink-inv: #0b0f2e;

  --rd-glass: rgba(255, 255, 255, .075);
  --rd-glass-2: rgba(255, 255, 255, .12);
  --rd-glass-strong: rgba(22, 20, 70, .72);
  --rd-glass-hover: rgba(255, 255, 255, .14);
  --rd-line: rgba(255, 255, 255, .16);
  --rd-line-2: rgba(255, 255, 255, .26);
  --rd-shadow: 0 18px 50px -18px rgba(3, 4, 30, .75), 0 2px 6px rgba(3, 4, 30, .35);
  --rd-shadow-sm: 0 6px 18px -8px rgba(3, 4, 30, .7);
  --rd-highlight: inset 0 1px 0 rgba(255, 255, 255, .12);

  --rd-accent: #8b9cff;                   /* primary (periwinkle) */
  --rd-accent-2: #5eead4;                 /* secondary (teal) */
  --rd-accent-ink: #0b0f2e;
  --rd-accent-grad: linear-gradient(135deg, #7c8cff 0%, #a78bfa 50%, #2dd4bf 100%);
  --rd-focus: #c4b5fd;

  /* status: fg for text/icons, bg for tinted fills, line for borders */
  --rd-ok: #4ade80;   --rd-ok-bg: rgba(74, 222, 128, .14);   --rd-ok-line: rgba(74, 222, 128, .42);     /* filed */
  --rd-due: #fcd34d;  --rd-due-bg: rgba(252, 211, 77, .14);  --rd-due-line: rgba(252, 211, 77, .45);    /* due soon */
  --rd-late: #fb8a8a; --rd-late-bg: rgba(248, 113, 113, .16); --rd-late-line: rgba(248, 113, 113, .5);  /* overdue */
  --rd-info: #7cc4ff; --rd-info-bg: rgba(96, 165, 250, .15); --rd-info-line: rgba(96, 165, 250, .45);   /* info */
  --rd-muted: #b4b8dc; --rd-muted-bg: rgba(255, 255, 255, .08); --rd-muted-line: rgba(255, 255, 255, .2);
}

:root[data-theme="light"] {
  color-scheme: light;
  --rd-bg: radial-gradient(1100px 700px at 8% -10%, rgba(129, 140, 248, .40), transparent 60%),
           radial-gradient(900px 640px at 105% 10%, rgba(45, 212, 191, .30), transparent 60%),
           radial-gradient(900px 700px at 60% 120%, rgba(196, 181, 253, .55), transparent 62%),
           linear-gradient(160deg, #eef0ff 0%, #f3eefe 50%, #e7f6f7 100%);
  --rd-bg-solid: #eef0fb;
  --rd-ink: #141638;
  --rd-ink-2: #383c6b;
  --rd-ink-3: #555a86;
  --rd-ink-inv: #ffffff;
  --rd-glass: rgba(255, 255, 255, .62);
  --rd-glass-2: rgba(255, 255, 255, .78);
  --rd-glass-strong: rgba(255, 255, 255, .88);
  --rd-glass-hover: rgba(255, 255, 255, .9);
  --rd-line: rgba(40, 44, 110, .14);
  --rd-line-2: rgba(40, 44, 110, .24);
  --rd-shadow: 0 18px 44px -20px rgba(40, 38, 120, .35), 0 2px 6px rgba(40, 38, 120, .08);
  --rd-shadow-sm: 0 6px 16px -8px rgba(40, 38, 120, .3);
  --rd-highlight: inset 0 1px 0 rgba(255, 255, 255, .9);
  --rd-accent: #4f46e5;
  --rd-accent-2: #0f766e;
  --rd-accent-ink: #ffffff;
  --rd-accent-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #0d9488 100%);
  --rd-focus: #6d28d9;
  --rd-ok: #13703f;   --rd-ok-bg: rgba(22, 163, 74, .12);   --rd-ok-line: rgba(22, 163, 74, .4);
  --rd-due: #8a5a00;  --rd-due-bg: rgba(234, 179, 8, .18);  --rd-due-line: rgba(202, 138, 4, .5);
  --rd-late: #b42318; --rd-late-bg: rgba(239, 68, 68, .12); --rd-late-line: rgba(220, 38, 38, .42);
  --rd-info: #1d5fbf; --rd-info-bg: rgba(59, 130, 246, .12); --rd-info-line: rgba(59, 130, 246, .4);
  --rd-muted: #4d5279; --rd-muted-bg: rgba(40, 44, 110, .06); --rd-muted-line: rgba(40, 44, 110, .18);
}

/* ---------------- base ---------------- */
.rd-root, .rd-root body { margin: 0; min-height: 100%; }
.rd-root body {
  background: var(--rd-bg-solid); background-image: var(--rd-bg); background-attachment: fixed;
  color: var(--rd-ink); font: var(--rd-fs-md)/var(--rd-lh) var(--rd-font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
.rd-root *, .rd-root *::before, .rd-root *::after { box-sizing: border-box; }
.rd-root :focus-visible { outline: 2px solid var(--rd-focus); outline-offset: 2px; border-radius: 6px; }
.rd-root ::selection { background: rgba(139, 156, 255, .4); }
.rd-root button, .rd-root input, .rd-root select { font: inherit; color: inherit; }
.rd-h1 { font: 650 var(--rd-fs-2xl)/1.15 var(--rd-font-display); letter-spacing: -.02em; margin: 0; }
.rd-h2 { font: 620 var(--rd-fs-xl)/1.2 var(--rd-font-display); letter-spacing: -.012em; margin: 0; }
.rd-h3 { font: 600 var(--rd-fs-lg)/1.3 var(--rd-font-display); margin: 0; }
.rd-dim { color: var(--rd-ink-2); }
.rd-faint { color: var(--rd-ink-3); font-size: var(--rd-fs-sm); }
.rd-mono { font-family: var(--rd-font-mono); font-size: .92em; }

/* ---------------- surfaces ---------------- */
.rd-glass, .rd-glass-strong, .rd-panel {
  background: var(--rd-glass); border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg);
  box-shadow: var(--rd-shadow), var(--rd-highlight);
  -webkit-backdrop-filter: blur(var(--rd-blur)) saturate(150%); backdrop-filter: blur(var(--rd-blur)) saturate(150%);
}
.rd-glass-strong { background: var(--rd-glass-strong); border-color: var(--rd-line-2); }
.rd-panel { background: var(--rd-glass-2); border-radius: var(--rd-r-md); box-shadow: var(--rd-shadow-sm), var(--rd-highlight); }
.rd-divider { height: 1px; background: var(--rd-line); border: 0; margin: var(--rd-s4) 0; }

/* ---------------- controls ---------------- */
.rd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px;
  border-radius: var(--rd-r-md); border: 1px solid var(--rd-line-2); background: var(--rd-glass-2); color: var(--rd-ink);
  font-weight: 600; font-size: var(--rd-fs-sm); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s var(--rd-ease), border-color .15s var(--rd-ease), transform .15s var(--rd-ease);
}
.rd-btn:hover { background: var(--rd-glass-hover); border-color: var(--rd-line-2); }
.rd-btn:active { transform: translateY(1px); }
.rd-btn:disabled { opacity: .5; cursor: default; }
.rd-btn--primary { background: var(--rd-accent-grad); color: #fff; border-color: transparent; box-shadow: 0 8px 22px -10px rgba(124, 140, 255, .9); text-shadow: 0 1px 1px rgba(10, 10, 40, .35); }
.rd-btn--primary:hover { background: var(--rd-accent-grad); filter: brightness(1.08); }
.rd-btn--ghost { background: transparent; border-color: transparent; color: var(--rd-ink-2); }
.rd-btn--ghost:hover { background: var(--rd-glass); color: var(--rd-ink); }
.rd-btn--sm { min-height: 30px; padding: 0 11px; font-size: var(--rd-fs-xs); border-radius: var(--rd-r-sm); }
.rd-input {
  width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--rd-r-md); border: 1px solid var(--rd-line-2);
  background: rgba(255, 255, 255, .06); color: var(--rd-ink); font-size: var(--rd-fs-md);
}
:root[data-theme="light"] .rd-input { background: rgba(255, 255, 255, .85); }
.rd-input::placeholder { color: var(--rd-ink-3); }
.rd-input:focus { outline: 2px solid var(--rd-focus); outline-offset: 1px; border-color: transparent; }
.rd-label { display: block; font-size: var(--rd-fs-sm); color: var(--rd-ink-2); margin: 0 0 6px; font-weight: 550; }

.rd-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--rd-r-md); background: var(--rd-glass); border: 1px solid var(--rd-line); flex-wrap: wrap; }
.rd-tabs button { border: 0; background: transparent; color: var(--rd-ink-2); padding: 7px 13px; border-radius: var(--rd-r-sm); font-weight: 600; font-size: var(--rd-fs-sm); cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.rd-tabs button:hover { color: var(--rd-ink); background: var(--rd-glass); }
.rd-tabs button[aria-selected="true"] { background: var(--rd-glass-2); color: var(--rd-ink); box-shadow: var(--rd-shadow-sm), var(--rd-highlight); }
.rd-count { font-size: 11.5px; padding: 1px 7px; border-radius: var(--rd-r-pill); background: var(--rd-muted-bg); color: var(--rd-ink-2); font-weight: 650; }

/* ---------------- status ---------------- */
.rd-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--rd-r-pill); font-size: var(--rd-fs-xs); font-weight: 650; border: 1px solid; white-space: nowrap; }
.rd-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rd-tag--ok   { color: var(--rd-ok);   background: var(--rd-ok-bg);   border-color: var(--rd-ok-line); }
.rd-tag--due  { color: var(--rd-due);  background: var(--rd-due-bg);  border-color: var(--rd-due-line); }
.rd-tag--late { color: var(--rd-late); background: var(--rd-late-bg); border-color: var(--rd-late-line); }
.rd-tag--info { color: var(--rd-info); background: var(--rd-info-bg); border-color: var(--rd-info-line); }
.rd-tag--muted{ color: var(--rd-muted); background: var(--rd-muted-bg); border-color: var(--rd-muted-line); }

/* ---------------- tables ---------------- */
.rd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--rd-fs-sm); }
.rd-table th { position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 650; color: var(--rd-ink-2); background: var(--rd-glass-strong); padding: 9px 12px; border-bottom: 1px solid var(--rd-line-2); white-space: nowrap; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rd-table td { padding: 8px 12px; border-bottom: 1px solid var(--rd-line); vertical-align: top; }
.rd-table tr:hover td { background: var(--rd-glass); }
.rd-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .rd-root *, .rd-root *::before, .rd-root *::after { transition: none !important; animation: none !important; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rd-glass { background: rgba(30, 28, 86, .92); } :root[data-theme="light"] .rd-glass { background: rgba(255, 255, 255, .95); }
}