/* ==========================================================================
   Messaging Platform Hub — Design Tokens
   Single source of truth for the landing page, developer portal and admin
   console. Load this first, before any page/theme stylesheet.
   ========================================================================== */

/* The faces. Loaded here, once (css/fonts.css), so every page and every app that vendors
   these tokens gets them on refresh: Manrope for headings and reading,
   JetBrains Mono for code. (Hub consolidation phase 2, 2026-10-03: this said
   Bricolage Grotesque and Source Sans 3, which nothing loaded; pages that
   named them read the system face.) */
@import url('/messaging-platform/hub/css/fonts.css');   /* served here, preloaded, no swap (2026-10-05) */

:root {
    color-scheme: dark;

    /* --- Surfaces ------------------------------------------------------- */
    --bg:            #0b1120;   /* page background                          */
    --surface-1:     #101827;   /* cards, code blocks, sidebar              */
    --surface-2:     #16203a;   /* raised / hover                           */
    --surface-3:     #1e2a3d;   /* modals, popovers, table header           */
    --overlay:       rgba(2, 6, 23, 0.72);

    /* --- Lines ---------------------------------------------------------- */
    --border:        rgba(148, 163, 184, 0.14);
    --border-strong: rgba(148, 163, 184, 0.28);

    /* --- Text ----------------------------------------------------------- */
    --text:          #eef2f8;   /* headings                                 */
    --text-body:     #c4cede;   /* paragraphs                               */
    --text-muted:    #8a97ab;   /* captions, meta (5.4:1 on --bg)           */
    --text-faint:    #64748b;   /* placeholders / disabled only             */

    /* --- Brand ---------------------------------------------------------- */
    /* Teal on navy: ONE primary colour across the site. Until 2026-10-04 the
       brand was rust (chosen 2026-09-07 to leave indigo-on-black), but the
       shell's Start free and the hub were already teal, so a visitor met four
       primary buttons (teal, rust, a rust gradient, Party Arcade's orange).
       The landing redesign (plan 4.9, owner-approved) made teal the primary.
       Teal is light, so text ON it is dark: --on-brand (11:1), never white.
       --brand-ink is teal lifted to read AS TEXT on the dark ground. */
    --brand:         #2dd4bf;   /* primary actions, active nav (text on it: --on-brand) */
    --brand-hover:   #5eead4;
    --brand-ink:     #7ee8dc;   /* teal used AS TEXT on dark                */
    --brand-subtle:  rgba(45, 212, 191, 0.14);
    --on-brand:      #04201c;   /* text and icons on a --brand fill         */
    --accent:        #2dd4bf;   /* teal — links, live indicators            */
    --accent-ink:    #7ee8dc;
    --accent-subtle: rgba(45, 212, 191, 0.12);
    --gradient-brand: linear-gradient(120deg, #2dd4bf, #14b8a6);

    /* --- Semantic ------------------------------------------------------- */
    --success:       #34d399;
    --success-bg:    rgba(52, 211, 153, 0.12);
    --warning:       #fbbf24;
    --warning-bg:    rgba(251, 191, 36, 0.12);
    --danger:        #f87171;
    --danger-strong: #ef4444;
    --danger-bg:     rgba(248, 113, 113, 0.12);
    --info:          #22d3ee;
    --info-bg:       rgba(34, 211, 238, 0.12);

    --code-bg:       #0d1526;

    /* --- Typography ----------------------------------------------------- */
  --font-display: "Manrope", "Manrope Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", "Manrope Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

    --fs-xs:   0.75rem;    /* 12px — badges, dense meta                     */
    --fs-sm:   0.8125rem;  /* 13px — dense table body, captions             */
    --fs-md:   0.875rem;   /* 14px — UI text                                */
    --fs-base: 1.0625rem;  /* 17px — prose (Source Sans 3 sits small on the em)  */
    --fs-lg:   1.125rem;   /* 18px — lede                                   */
    --fs-xl:   1.375rem;   /* 22px — card titles                            */
    --fs-2xl:  1.75rem;    /* 28px — section heading (mobile)               */
    --fs-3xl:  2.25rem;    /* 36px — section heading                        */
    --fs-hero: clamp(2.25rem, 5vw, 3.5rem);

    --lh-tight:  1.15;
    --lh-snug:   1.35;
    --lh-body:   1.65;

    /* --- Spacing (4px grid) --------------------------------------------- */
    --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3: 0.75rem;  --sp-4:  1rem;
    --sp-5:  1.25rem;  --sp-6:  1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
    --sp-12: 3rem;     --sp-16: 4rem;     --sp-24: 6rem;

    --container:      72rem;   /* 1152px page width                         */
    --container-text: 42rem;   /* prose measure                             */

    /* --- Radii ---------------------------------------------------------- */
    --r-sm:   6px;
    --r-md:   8px;
    --r-lg:   12px;
    --r-xl:   16px;
    --r-pill: 999px;

    /* --- Elevation ------------------------------------------------------ */
    --shadow-1: 0 1px 2px rgba(2, 6, 23, 0.5);
    --shadow-2: 0 8px 24px -8px rgba(2, 6, 23, 0.55);
    --shadow-3: 0 24px 56px -16px rgba(2, 6, 23, 0.65);

    /* --- Focus ---------------------------------------------------------- */
    --focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.5);

    /* --- Motion --------------------------------------------------------- */
    --ease: cubic-bezier(0.2, 0, 0.15, 1);
    --dur-fast: 120ms;
    --dur:      200ms;
}

/* Admin console runs the same system with a privileged accent.
   Applied via <html data-theme="admin"> or <body data-theme="admin">. */
[data-theme="admin"] {
    --brand:        #f59e0b;
    --brand-hover:  #fbbf24;
    --brand-ink:    #fcd34d;
    --brand-subtle: rgba(245, 158, 11, 0.12);
    --gradient-brand: linear-gradient(90deg, #f59e0b, #ef4444);
    --focus-ring:   0 0 0 3px rgba(245, 158, 11, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}