/* ==========================================================================
   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, so every page and every app that vendors
   these tokens gets them on refresh. Bricolage Grotesque carries the
   headings (optical sizes 12..96, so a 64px hero and a 14px card title are
   cut differently), Source Sans 3 carries the reading, JetBrains Mono the
   code. Before 2026-09-07 the site named Inter and never loaded it, so every
   visitor read the system face. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

: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 ---------------------------------------------------------- */
    /* Rust on navy, teal for what is live. Chosen 2026-09-07 to leave the
       indigo-on-black every generated site wears. White text on --brand is
       4.6:1 (AA), so every filled control keeps its white label; --brand-ink
       is the same hue lifted to read AS TEXT on the dark ground (8.1:1). */
    --brand:         #d9482f;   /* primary actions, active nav (4.6:1 vs #fff) */
    --brand-hover:   #ef6a52;
    --brand-ink:     #ffb0a0;   /* rust used AS TEXT on dark (8.1:1)        */
    --brand-subtle:  rgba(217, 72, 47, 0.14);
    --accent:        #2dd4bf;   /* teal — links, live indicators            */
    --accent-ink:    #7ee8dc;
    --accent-subtle: rgba(45, 212, 191, 0.12);
    --gradient-brand: linear-gradient(120deg, #d9482f, #f0a030);

    /* --- 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", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", 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;
    }
}