/* ==========================================================================
   Platinum Age PM — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, radii, shadows and motion.
   Every other stylesheet consumes these variables. Do not hard-code a hex
   value anywhere else in the application.

   Derived from the supplied "The Tomorrow Fund" screenshots. Where a reference
   value failed WCAG 2.1 AA contrast it has been adjusted by the smallest
   amount that passes; each adjustment is annotated with its measured ratio.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- */
  /* Surfaces                                                          */
  /* ---------------------------------------------------------------- */
  --bg-page: #090d13;          /* near-black application background     */
  --bg-header: #141923;        /* top header bar                       */
  --bg-sidebar: #11151d;       /* administrator sidebar                */
  --bg-panel: #171c27;         /* charcoal content panels              */
  --bg-panel-dark: #10141c;    /* inset regions, table head, chat well  */
  --bg-panel-raised: #1b212e;  /* hover rows, nested strips            */
  --bg-card-navy: #17213d;     /* deep navy project / summary cards    */
  --bg-card-navy-hover: #1b2748;
  --bg-input: #202636;         /* form controls                        */
  --bg-input-disabled: #1a1f2b;
  --bg-selected: #1d2c49;      /* active nav, selected rows            */
  --bg-overlay: rgba(4, 7, 12, 0.78); /* modal scrim                   */

  /* ---------------------------------------------------------------- */
  /* Borders                                                           */
  /* ---------------------------------------------------------------- */
  --border-default: #2b3240;   /* thin low-contrast slate              */
  --border-strong: #38414f;    /* hover / emphasis                     */
  --border-blue: #274879;      /* navy card edge                       */
  --border-blue-hover: #35619f;
  --border-input: #333b4c;

  /* ---------------------------------------------------------------- */
  /* Text                                                              */
  /* ---------------------------------------------------------------- */
  --text-primary: #f5f7fb;     /* 15.9:1 on --bg-panel                 */
  --text-secondary: #98a5c1;   /*  6.9:1 on --bg-panel                 */
  --text-muted: #8996ae;       /* reference #78839a measured 3.65:1 on
                                  --bg-selected; lightened to reach
                                  4.66:1 there and 5.06:1 on --bg-input */
  --text-on-accent: #ffffff;
  --text-inverse: #0b1220;

  /* ---------------------------------------------------------------- */
  /* Accents                                                           */
  /* ---------------------------------------------------------------- */
  /* Blue used for TEXT and ICONS on dark surfaces — 6.0:1 on page.    */
  --accent-blue: #4d8df7;
  --accent-blue-hover: #65a0ff;  /* 5.32:1 on --bg-selected            */
  /* Blue used as a FILLED background behind white text. The reference
     #4d8df7 measured 3.25:1 against white, below AA for body text, so
     filled surfaces use this slightly deeper royal blue: 4.53:1.       */
  --accent-blue-solid: #3572e0;
  --accent-blue-solid-hover: #3f7ce8;
  --accent-blue-dim: rgba(77, 141, 247, 0.14);

  --accent-cyan: #38bdf8;
  --accent-green: #31d49b;
  --accent-green-dim: rgba(49, 212, 155, 0.13);
  --accent-amber: #f4b621;
  --accent-amber-dim: rgba(244, 182, 33, 0.13);
  --accent-red: #ff6268;
  --accent-red-dim: rgba(255, 98, 104, 0.13);
  --accent-purple: #b49bff;      /* reference #9b78ff measured 4.32:1 on
                                    --bg-selected; lightened to 6.01:1  */
  --accent-purple-dim: rgba(180, 155, 255, 0.14);
  --accent-slate-dim: rgba(137, 150, 174, 0.13);

  /* Chat bubbles: lead is green-accented, participants blue-accented.
     Both sit on the charcoal chat well, not on bright messaging colours. */
  --bubble-lead-bg: #122d26;
  --bubble-lead-border: #2c5f4e;
  --bubble-other-bg: #16223c;
  --bubble-other-border: #2c4470;
  --bubble-self-ring: #3d4b64;

  /* ---------------------------------------------------------------- */
  /* Typography                                                        */
  /* ---------------------------------------------------------------- */
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-numeric: Inter, "SF Mono", ui-monospace, monospace;

  --fs-page-title: 1.5rem;    /* 24px */
  --fs-panel-title: 1.1875rem;/* 19px */
  --fs-card-title: 1.0625rem; /* 17px */
  --fs-body: 0.875rem;        /* 14px */
  --fs-body-sm: 0.8125rem;    /* 13px — floor for essential content */
  --fs-label: 0.6875rem;      /* 11px uppercase labels */
  --fs-button: 0.8125rem;     /* 13px */
  --fs-metric: 1.75rem;       /* 28px summary-card figures */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-label: 0.08em;   /* uppercase label tracking */
  --ls-button: 0.045em;
  --ls-wordmark: 0.015em;

  /* ---------------------------------------------------------------- */
  /* Spacing — 4px base scale                                          */
  /* ---------------------------------------------------------------- */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.5rem;    /*  8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.25rem;   /* 20px */
  --sp-6: 1.5rem;    /* 24px */
  --sp-7: 1.75rem;   /* 28px */
  --sp-8: 2rem;      /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */

  --panel-padding: 1.875rem;   /* 30px desktop panel interior */
  --panel-padding-sm: 1.25rem; /* 20px below the tablet breakpoint */
  --page-padding: 1.75rem;     /* 28px admin workspace padding */

  /* ---------------------------------------------------------------- */
  /* Radii                                                             */
  /* ---------------------------------------------------------------- */
  --radius-small: 6px;
  --radius-medium: 10px;
  --radius-large: 13px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------- */
  /* Shadows — restrained                                              */
  /* ---------------------------------------------------------------- */
  --shadow-action: 0 5px 14px rgba(53, 114, 224, 0.28);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-card-hover: 0 10px 24px rgba(0, 0, 0, 0.42);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.62);
  --shadow-drawer: 0 0 40px rgba(0, 0, 0, 0.6);

  /* ---------------------------------------------------------------- */
  /* Focus                                                             */
  /* ---------------------------------------------------------------- */
  --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--accent-blue);
  --focus-ring-tight: 0 0 0 2px var(--accent-blue);

  /* ---------------------------------------------------------------- */
  /* Layout                                                            */
  /* ---------------------------------------------------------------- */
  --member-max-width: 1080px;
  --header-height: 56px;
  --sidebar-width: 208px;
  --touch-target: 44px;

  /* ---------------------------------------------------------------- */
  /* Motion — used only to explain a change the user caused            */
  /* ---------------------------------------------------------------- */
  --motion-fast: 110ms;
  --motion-base: 170ms;
  --motion-slow: 240ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---------------------------------------------------------------- */
  /* Z-index scale                                                     */
  /* ---------------------------------------------------------------- */
  --z-header: 100;
  --z-sidebar: 90;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}