/* Direction: grand Indian hotel lobby — cream paper, navy, brass gold, teal accents */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #fbf6ea;
  --surface: #ffffff;
  --surface-2: #efebdf;
  --border: #e6dcc4;
  --border-strong: #b0b1a9;
  --ink: #0f2347;
  --muted: #55627f;
  --accent: #0e7c7b;
  --accent-hover: #0c6969;
  --accent-ink: #ffffff;
  --accent-text: #0b6665;
  --accent-strong: #0d7271;
  --accent-soft: #dcf0ef;
  --accent-border: #90bfb8;
  --success: #157a4a;
  --success-ink: #ffffff;
  --success-soft: #dfe7d7;
  --success-strong: #137044;
  --warning: #a86a00;
  --warning-ink: #ffffff;
  --warning-soft: #f1e5ce;
  --warning-strong: #8f5a00;
  --danger: #b4232f;
  --danger-ink: #ffffff;
  --danger-soft: #f2ddd4;
  --danger-strong: #b4232f;
  --chart-1: #0e7c7b;
  --chart-2: #4a89d3;
  --chart-3: #6f3b87;
  --chart-4: #c15c69;
  --chart-5: #714a01;
  --chart-6: #62943d;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --radius-card: 18px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --card-pad: 1.25rem;
  --x-navy: #0f2347;
  --x-navy-2: #1b3668;
  --x-gold: #e3a72f;
  --x-gold-soft: #fbefd0;
  --x-teal: #0e7c7b;
  --x-on-photo: #ffffff;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #021111;
  --surface: #1b2929;
  --surface-2: #0f1d1d;
  --border: #253232;
  --border-strong: #4e5858;
  --ink: #fbf6ea;
  --muted: #979a93;
  --accent: #0e7c7b;
  --accent-hover: #32908f;
  --accent-ink: #ffffff;
  --accent-text: #52a1a1;
  --accent-strong: #439999;
  --accent-soft: #052928;
  --accent-border: #074141;
  --success: #157a4a;
  --success-ink: #ffffff;
  --success-soft: #06281e;
  --success-strong: #499871;
  --warning: #a86a00;
  --warning-ink: #ffffff;
  --warning-soft: #27250d;
  --warning-strong: #b58127;
  --danger: #b4232f;
  --danger-ink: #ffffff;
  --danger-soft: #291518;
  --danger-strong: #ca626a;
  --chart-1: #0e7c7b;
  --chart-2: #4a89d3;
  --chart-3: #9c67b6;
  --chart-4: #c15c69;
  --chart-5: #aa7418;
  --chart-6: #62943d;
}

.nav-link{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;border-radius:.85rem;padding:.65rem .8rem;font-size:.92rem;font-weight:500;color:var(--x-on-photo);opacity:.9;transition:background .15s,opacity .15s}
.nav-link:hover{background:var(--x-navy-2);opacity:1}
.nav-link.active{background:var(--x-gold);color:var(--x-navy);opacity:1;font-weight:700}
.nav-link:focus-visible{outline:2px solid var(--x-gold);outline-offset:2px}
.side{background:var(--x-navy);color:var(--x-on-photo)}
.side-glow{background:radial-gradient(120% 60% at 0% 0%,var(--x-navy-2),transparent 70%)}
.scrim{background:linear-gradient(to top,var(--x-navy) 5%,transparent 80%)}
.avatar{display:grid;place-items:center;flex:none;width:2.6rem;height:2.6rem;border-radius:999px;background:var(--x-navy);color:var(--x-gold);font-weight:700;font-size:.85rem;letter-spacing:.03em}
.tile{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;border-radius:.9rem}
.tile-teal{background:var(--accent-soft);color:var(--accent-text)}
.tile-gold{background:var(--x-gold-soft);color:var(--x-navy)}
.tile-navy{background:var(--x-navy);color:var(--x-gold)}
.tile-green{background:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success)}
.tile-red{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.tone,.st{display:inline-flex;align-items:center;gap:.3rem;border-radius:999px;padding:.15rem .65rem;font-size:.75rem;font-weight:700;white-space:nowrap}
.tone-good,.st-resolved{background:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success)}
.tone-mid,.st-progress{background:var(--x-gold-soft);color:var(--x-navy)}
.tone-bad,.st-pending{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.prio-High{color:var(--danger)}.prio-Medium{color:var(--warning)}.prio-Low{color:var(--muted)}
.rate-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .95rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}
.rate-pill:hover{border-color:var(--x-gold)}
.rate-pill:active{transform:scale(.97)}
input:checked + .rate-pill{background:var(--x-gold);border-color:var(--x-gold);color:var(--x-navy)}
input:focus-visible + .rate-pill{outline:2px solid var(--accent);outline-offset:2px}
.donut{display:grid;place-items:center;width:9.5rem;height:9.5rem;border-radius:999px}
.donut-in{display:grid;place-items:center;width:6.6rem;height:6.6rem;border-radius:999px;background:var(--surface);text-align:center}
.bar-fill{transform-origin:left;animation:grow .7s ease-out both}
@keyframes grow{from{transform:scaleX(.25)}}
html.reduced-motion .bar-fill{animation:none}
.flash{border-radius:14px;padding:.8rem 1rem;font-size:.92rem;font-weight:500;display:flex;gap:.6rem;align-items:center}
.flash-ok{background:color-mix(in srgb,var(--success) 14%,transparent);color:var(--success)}
.flash-err{background:color-mix(in srgb,var(--danger) 13%,transparent);color:var(--danger)}
.err{color:var(--danger);font-size:.8rem;margin-top:.25rem}
.cat-card{display:flex;align-items:center;gap:.7rem;border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:.7rem .85rem;transition:border-color .15s,transform .15s}
.cat-card:hover{border-color:var(--x-gold);transform:translateY(-2px)}
.cat-card.on{border-color:var(--x-teal);background:var(--accent-soft)}
.gold-rule{display:block;width:3rem;height:3px;border-radius:3px;background:var(--x-gold);margin-top:.6rem}
.notif{display:flex;gap:.9rem;align-items:flex-start;padding:1rem;border-radius:16px;border:1px solid var(--border);background:var(--surface);transition:border-color .15s}
.notif:hover{border-color:var(--x-gold)}
.notif.unread{border-left:4px solid var(--x-gold)}