/* ==========================================================================
   Rooman Quantix — design tokens (teal theme)
   One palette for every page: landing, sign-in, workspace, Admin, Super Admin.
   Load this file FIRST on every page; page stylesheets map their own variables
   onto these tokens instead of hard-coding colours.

   Look: teal sidebar with white text/icons; the active item is a white tab
   joined to the white content panel; navy headings; soft sky-blue data
   colours; warm yellow for the one thing to notice; pink as a rare accent.
   ========================================================================== */
:root {
  /* Brand */
  --ra-teal: #23A094;          /* sidebar, primary buttons, links */
  --ra-teal-hover: #1B8A7F;    /* hover / pressed */
  --ra-teal-deep: #146C64;     /* text on light teal, focus rings */
  --ra-teal-50: #ECF8F6;       /* tinted backgrounds, selected rows */
  --ra-teal-100: #D2EFEB;      /* chips, badges, subtle borders */

  --ra-navy: #1F2A4A;          /* headings, primary text */
  --ra-navy-soft: #4B5675;     /* body text */
  --ra-muted: #8A93A8;         /* captions, placeholders, axis labels */

  --ra-yellow: #FFD66B;        /* highlight (today, key value, CTA chip) */
  --ra-yellow-soft: #FFF4D1;
  --ra-sky: #D6F0F5;           /* chart bars, info backgrounds */
  --ra-sky-strong: #8FD3DF;
  --ra-pink: #F8B7C8;          /* rare decorative accent */

  /* Surfaces */
  --ra-app-bg: #E7F6F7;        /* outer background behind the white panel */
  --ra-surface: #FFFFFF;       /* cards, content panel */
  --ra-surface-alt: #F6FAFB;   /* table headers, inputs, zebra rows */
  --ra-border: #E6ECF2;
  --ra-border-strong: #D3DCE6;

  /* Sidebar */
  --ra-sidebar-bg: var(--ra-teal);
  --ra-sidebar-text: rgba(255, 255, 255, 0.86);   /* white, never yellow */
  --ra-sidebar-text-active: var(--ra-teal);        /* on the white active tab */
  --ra-sidebar-active-bg: #FFFFFF;
  --ra-sidebar-hover-bg: rgba(255, 255, 255, 0.12);
  --ra-sidebar-divider: rgba(255, 255, 255, 0.18);
  --ra-sidebar-text-strong: #FFFFFF;               /* hover / icons on the rail */
  --ra-sidebar-cap-hover: var(--ra-teal-hover);    /* header cap above the rail */

  /* Organization theme (set at runtime by js/branding.js; unset = teal look):
     --ra-accent        highlights: active nav bar, secondary-button hover, chart 2
     --ra-header-accent stripe under the workspace header
     --ra-focus         focus rings
     --ra-on-primary    text on primary buttons */

  /* Status (soft, not harsh) */
  --ra-success: #23A094;  --ra-success-bg: #E3F5F2;
  --ra-warning: #C9971C;  --ra-warning-bg: #FFF6DB;
  --ra-danger: #E05A68;   --ra-danger-bg: #FDECEE;   /* destructive actions only */
  --ra-info: #2E8FB0;     --ra-info-bg: #E3F4F8;

  /* Charts: use in this order */
  --ra-chart-1: #23A094; --ra-chart-2: #8FD3DF; --ra-chart-3: #FFD66B; --ra-chart-4: #F8B7C8;
  --ra-chart-5: #1F2A4A; --ra-chart-6: #5BC0B5; --ra-chart-7: #B8E2EA; --ra-chart-8: #F2A65A;

  /* Shape and depth */
  --ra-radius-sm: 8px;
  --ra-radius: 14px;           /* cards, inputs, dialogs */
  --ra-radius-lg: 24px;        /* app shell / content panel */
  --ra-radius-pill: 999px;     /* buttons, chips, badges */
  --ra-shadow-sm: 0 1px 2px rgba(31, 42, 74, 0.06);
  --ra-shadow: 0 8px 24px -12px rgba(31, 42, 74, 0.18);
  --ra-shadow-lg: 0 24px 48px -20px rgba(31, 42, 74, 0.28);

  --ra-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ra-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

/* Shared building blocks any page may use */
.ra-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px;
  border-radius: var(--ra-radius-pill); border: 1px solid transparent; font: 600 14px var(--ra-font); cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease; text-decoration: none; }
.ra-btn-primary { background: var(--ra-teal); color: var(--ra-on-primary, #fff); }
.ra-btn-primary:hover { background: var(--ra-teal-hover); }
.ra-btn-ghost { background: #fff; color: var(--ra-navy); border-color: var(--ra-border-strong); }
.ra-btn-ghost:hover { border-color: var(--ra-teal); color: var(--ra-teal-deep); }
.ra-btn-yellow { background: var(--ra-yellow); color: var(--ra-navy); }
.ra-btn-danger { background: var(--ra-danger); color: #fff; }
.ra-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font: 600 12px var(--ra-font); }
.ra-badge-ok { background: var(--ra-success-bg); color: var(--ra-teal-deep); }
.ra-badge-warn { background: var(--ra-warning-bg); color: var(--ra-warning); }
.ra-badge-danger { background: var(--ra-danger-bg); color: var(--ra-danger); }
:focus-visible { outline: 2px solid var(--ra-focus, var(--ra-teal)); outline-offset: 2px; }

/* ---- Rooman Quantix product lockup: RQ mark + "Rooman Quantix" wordmark ---- */
.rq-wordmark { display: inline-flex; align-items: baseline; gap: .3em; white-space: nowrap; line-height: 1;
  font: 800 17px var(--ra-font); letter-spacing: -.2px; color: var(--ra-navy); }
.rq-wordmark .rq-wm-accent { color: var(--ra-teal); }
/* The mark is teal on transparent: on a teal bar it sits on a small white chip */
.rq-chip { display: inline-flex; align-items: center; background: #fff; border-radius: 10px; padding: 4px 8px;
  box-shadow: 0 2px 8px -3px rgba(31, 42, 74, .35); }
.rq-chip-wordmark { color: #fff; }
.rq-chip-wordmark .rq-wm-accent { color: #fff; opacity: .85; }
/* Sizing next to the existing header classes (.brand-logo-img, .form-brand-logo, .pl-brand img) */
.brand-logo-img.rq-mark { height: 32px; margin-right: 10px; }
.rq-chip .rq-mark { height: 24px; width: auto; display: block; margin: 0; }
.rq-wordmark + .brand-divider { margin-left: 14px; }
@media (max-width: 768px) { .brand-logo-img.rq-mark { height: 26px; } }
@media (max-width: 760px) { body.ra-console .rq-wordmark { display: none; } }
@media (max-width: 480px) { .top-navbar .rq-wordmark, .rq-chip-wordmark { display: none; } }
.brand-link > .brand-logo-img.rq-mark { margin-right: 0; }