/* ==========================================================================
   SocialHub — Design Tokens
   Single source of truth for colour, type, spacing, radius, elevation.
   Nothing here paints anything; it only declares values.
   ========================================================================== */

:root {
    /* ---- Brand ---------------------------------------------------------- */
    --sh-brand-blue: #1d6af0;
    --sh-brand-purple: #7c3aed;
    --sh-brand-pink: #ec4899;
    --sh-brand-gradient: linear-gradient(135deg, #2b8cf0 0%, #7c3aed 55%, #ec4899 100%);
    --sh-brand-gradient-soft: linear-gradient(135deg, #eef4ff 0%, #f3ecff 55%, #fdeef7 100%);

    /* ---- Primary (public + user surfaces) ------------------------------- */
    --sh-primary-50: #eff6ff;
    --sh-primary-100: #dbeafe;
    --sh-primary-200: #bfdbfe;
    --sh-primary-300: #93c5fd;
    --sh-primary-400: #60a5fa;
    --sh-primary-500: #3b82f6;
    --sh-primary-600: #1d6af0;
    --sh-primary-700: #1a56d6;
    --sh-primary-800: #1e40af;
    --sh-primary-900: #1e3a8a;

    /* ---- Violet (premium, admin accent) --------------------------------- */
    --sh-violet-50: #f5f3ff;
    --sh-violet-100: #ede9fe;
    --sh-violet-200: #ddd6fe;
    --sh-violet-300: #c4b5fd;
    --sh-violet-400: #a78bfa;
    --sh-violet-500: #8b5cf6;
    --sh-violet-600: #7c3aed;
    --sh-violet-700: #6d28d9;
    --sh-violet-800: #5b21b6;

    /* ---- Indigo (admin primary) ----------------------------------------- */
    --sh-indigo-50: #eef2ff;
    --sh-indigo-100: #e0e7ff;
    --sh-indigo-200: #c7d2fe;
    --sh-indigo-400: #818cf8;
    --sh-indigo-500: #6366f1;
    --sh-indigo-600: #5b5bd6;
    --sh-indigo-700: #4f46e5;

    /* ---- Pink ----------------------------------------------------------- */
    --sh-pink-50: #fdf2f8;
    --sh-pink-100: #fce7f3;
    --sh-pink-200: #fbcfe8;
    --sh-pink-500: #ec4899;
    --sh-pink-600: #db2777;

    /* ---- Status --------------------------------------------------------- */
    --sh-success-50: #ecfdf5;
    --sh-success-100: #d1fae5;
    --sh-success-500: #10b981;
    --sh-success-600: #059669;
    --sh-success-700: #047857;

    --sh-warning-50: #fffbeb;
    --sh-warning-100: #fef3c7;
    --sh-warning-500: #f59e0b;
    --sh-warning-600: #d97706;
    --sh-warning-700: #b45309;

    --sh-danger-50: #fef2f2;
    --sh-danger-100: #fee2e2;
    --sh-danger-500: #ef4444;
    --sh-danger-600: #dc2626;
    --sh-danger-700: #b91c1c;

    --sh-info-50: #eff6ff;
    --sh-info-100: #dbeafe;
    --sh-info-500: #3b82f6;
    --sh-info-600: #2563eb;

    /* ---- Neutrals ------------------------------------------------------- */
    --sh-white: #ffffff;
    /* The letterbox behind a video or a code pane. Fixed in both themes:
       a player's surround stays dark whatever the site does, and anything
       drawn on it needs a fixed colour too (see `--sh-white`). */
    --sh-media-backdrop: #0f172a;
    /* A pill drawn *on* a thumbnail — a play badge, a duration. Fixed
       for the same reason as the backdrop: it sits on a photograph, not
       on the theme's surface, so it must not flip with dark mode.
       Written as a literal rgba in three places before this. */
    --sh-media-scrim: rgba(9, 14, 30, 0.55);
    --sh-gray-25: #fcfcfd;
    --sh-gray-50: #f8fafc;
    --sh-gray-100: #f1f5f9;
    --sh-gray-150: #eaeef4;
    --sh-gray-200: #e2e8f0;
    --sh-gray-300: #cbd5e1;
    --sh-gray-400: #94a3b8;
    --sh-gray-500: #64748b;
    --sh-gray-600: #475569;
    --sh-gray-700: #334155;
    --sh-gray-800: #1e293b;
    --sh-gray-900: #0f172a;

    /* ---- Semantic surfaces ---------------------------------------------- */
    --sh-page-bg: #f0f2f7;
    --sh-surface: #ffffff;
    --sh-surface-alt: #f8fafc;
    --sh-surface-sunken: #f1f5f9;
    --sh-border: #e6eaf1;
    --sh-border-strong: #d7dee8;

    /* Translucent chrome: sticky headers and the frosted chips that sit on
       the brand gradient. Literal white here would glare in dark mode. */
    --sh-surface-veil: rgba(255, 255, 255, 0.92);
    --sh-surface-frost: rgba(255, 255, 255, 0.7);

    --sh-text: #111827;
    --sh-text-strong: #0b1220;
    --sh-text-muted: #6b7280;
    --sh-text-subtle: #9aa3b2;
    --sh-text-inverse: #ffffff;

    --sh-link: var(--sh-primary-600);

    /* ---- Typography ----------------------------------------------------- */
    --sh-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --sh-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Anything that is a file format rather than prose — robots.txt, custom
       CSS, an event key. */
    --sh-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    --sh-fs-2xs: 0.6875rem;  /* 11px */
    --sh-fs-xs: 0.75rem;     /* 12px */
    --sh-fs-sm: 0.8125rem;   /* 13px */
    --sh-fs-base: 0.875rem;  /* 14px */
    --sh-fs-md: 0.9375rem;   /* 15px */
    --sh-fs-lg: 1rem;        /* 16px */
    --sh-fs-xl: 1.125rem;    /* 18px */
    --sh-fs-2xl: 1.375rem;   /* 22px */
    --sh-fs-3xl: 1.75rem;    /* 28px */
    --sh-fs-4xl: 2.25rem;    /* 36px */
    --sh-fs-5xl: 3rem;       /* 48px */

    --sh-fw-normal: 400;
    --sh-fw-medium: 500;
    --sh-fw-semibold: 600;
    --sh-fw-bold: 700;
    --sh-fw-extrabold: 800;

    --sh-lh-tight: 1.2;
    --sh-lh-snug: 1.35;
    --sh-lh-normal: 1.5;
    --sh-lh-relaxed: 1.65;

    /* ---- Spacing scale --------------------------------------------------- */
    --sh-sp-1: 0.25rem;
    --sh-sp-2: 0.5rem;
    --sh-sp-3: 0.75rem;
    --sh-sp-4: 1rem;
    --sh-sp-5: 1.25rem;
    --sh-sp-6: 1.5rem;
    --sh-sp-8: 2rem;
    --sh-sp-10: 2.5rem;
    --sh-sp-12: 3rem;
    --sh-sp-16: 4rem;

    /* ---- Radius ---------------------------------------------------------- */
    --sh-radius-xs: 6px;
    --sh-radius-sm: 8px;
    --sh-radius: 12px;
    --sh-radius-lg: 16px;
    --sh-radius-xl: 20px;
    --sh-radius-2xl: 24px;
    --sh-radius-pill: 999px;

    /* ---- Elevation -------------------------------------------------------- */
    --sh-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --sh-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --sh-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    --sh-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
    --sh-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
    --sh-shadow-focus: 0 0 0 3px rgba(29, 106, 240, 0.18);

    /* ---- Layout metrics --------------------------------------------------- */
    --sh-header-h: 56px;
    --sh-tabbar-h: 62px;
    --sh-sidebar-w: 248px;
    --sh-rail-w: 316px;
    /* One rail on a wide screen. The pair are 268px each; when an admin
       switches the second off, the survivor takes a real share of the
       space instead of handing almost all of it to the feed. */
    --sh-rail-w-solo: 400px;
    --sh-feed-max: 640px;
    --sh-shell-max: 1440px;
    --sh-gutter: 16px;

    /* ---- Motion ------------------------------------------------------------ */
    --sh-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --sh-dur-fast: 120ms;
    --sh-dur: 200ms;
    --sh-dur-slow: 320ms;

    /* ---- Z-index ----------------------------------------------------------- */
    --sh-z-sticky: 100;
    --sh-z-header: 200;
    --sh-z-tabbar: 210;
    --sh-z-drawer: 300;
    --sh-z-modal: 400;
    --sh-z-toast: 500;
}

/* --------------------------------------------------------------------------
   Admin surface re-maps the semantic tokens to the indigo/violet scheme.
   Scoped to the shell so a single component file serves both surfaces.
   -------------------------------------------------------------------------- */
.sh-admin {
    --sh-primary-50: var(--sh-indigo-50);
    --sh-primary-100: var(--sh-indigo-100);
    --sh-primary-200: var(--sh-indigo-200);
    --sh-primary-400: var(--sh-indigo-400);
    --sh-primary-500: var(--sh-indigo-500);
    --sh-primary-600: var(--sh-indigo-600);
    --sh-primary-700: var(--sh-indigo-700);

    --sh-page-bg: #f7f7fd;
    --sh-border: #ebe9f5;
    --sh-shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.18);
    --sh-link: var(--sh-indigo-600);
}

/* ==========================================================================
   Dark theme
   ==========================================================================
   Settings → Appearance → Theme picks light, dark or system. Because every
   rule in this codebase paints from the tokens above, a dark surface is a
   remap rather than a second stylesheet.

   The values live once in the `--sh-dk-*` set below; the two switch blocks
   that follow only point the semantic tokens at them, so there is a single
   place to change a dark colour.
   -------------------------------------------------------------------------- */

:root {
    /* Page furniture */
    --sh-dk-page-bg: #0e1116;
    --sh-dk-surface: #171b22;
    --sh-dk-surface-alt: #1e232c;
    --sh-dk-surface-sunken: #13171d;
    --sh-dk-border: #272d38;
    --sh-dk-border-strong: #39414f;
    --sh-dk-surface-veil: rgba(23, 27, 34, 0.92);
    --sh-dk-surface-frost: rgba(30, 35, 44, 0.72);

    /* Type */
    --sh-dk-text: #e6e9ef;
    --sh-dk-text-strong: #f7f9fc;
    --sh-dk-text-muted: #98a2b3;
    --sh-dk-text-subtle: #6b7484;
    --sh-dk-text-inverse: #0e1116;

    /* The neutral ramp inverts: low steps are backgrounds, high steps type. */
    --sh-dk-gray-25: #15181e;
    --sh-dk-gray-50: #1a1e25;
    --sh-dk-gray-100: #21262f;
    --sh-dk-gray-150: #262c36;
    --sh-dk-gray-200: #2d333e;
    --sh-dk-gray-300: #3c4451;
    --sh-dk-gray-400: #6b7484;
    --sh-dk-gray-500: #98a2b3;
    --sh-dk-gray-600: #b5bdca;
    --sh-dk-gray-700: #cfd5de;
    --sh-dk-gray-800: #e3e7ed;
    --sh-dk-gray-900: #f4f6fa;

    /* Tinted chip and badge fills, darkened to sit on the dark surface. */
    --sh-dk-primary-50: #132440;
    --sh-dk-primary-100: #16305a;
    --sh-dk-primary-200: #1b3f74;
    --sh-dk-violet-50: #221a3c;
    --sh-dk-violet-100: #2c2050;
    --sh-dk-violet-200: #392a66;
    --sh-dk-indigo-50: #191c3c;
    --sh-dk-indigo-100: #222654;
    --sh-dk-indigo-200: #2d3270;
    --sh-dk-pink-50: #371328;
    --sh-dk-pink-100: #471833;
    --sh-dk-pink-200: #5c2043;
    --sh-dk-success-50: #0c2a21;
    --sh-dk-success-100: #0f372b;
    --sh-dk-warning-50: #32250b;
    --sh-dk-warning-100: #422e0b;
    --sh-dk-danger-50: #391417;
    --sh-dk-danger-100: #49191e;
    --sh-dk-info-50: #132440;
    --sh-dk-info-100: #16305a;

    --sh-dk-brand-gradient-soft: linear-gradient(135deg, #16213a 0%, #241d3f 55%, #35182c 100%);

    /* Shadows need more weight to read against a dark page. */
    --sh-dk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-dk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    --sh-dk-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    --sh-dk-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --sh-dk-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* An explicit dark choice, and the system choice when the OS asks for dark.
   The two blocks are mirrors on purpose: CSS has no way to alias a whole
   declaration set, so only the selectors differ. */
:root[data-sh-theme='dark'] {
    --sh-page-bg: var(--sh-dk-page-bg);
    --sh-surface: var(--sh-dk-surface);
    --sh-surface-alt: var(--sh-dk-surface-alt);
    --sh-surface-sunken: var(--sh-dk-surface-sunken);
    --sh-border: var(--sh-dk-border);
    --sh-border-strong: var(--sh-dk-border-strong);
    --sh-surface-veil: var(--sh-dk-surface-veil);
    --sh-surface-frost: var(--sh-dk-surface-frost);

    --sh-text: var(--sh-dk-text);
    --sh-text-strong: var(--sh-dk-text-strong);
    --sh-text-muted: var(--sh-dk-text-muted);
    --sh-text-subtle: var(--sh-dk-text-subtle);
    --sh-text-inverse: var(--sh-dk-text-inverse);
    --sh-link: var(--sh-primary-400);

    --sh-gray-25: var(--sh-dk-gray-25);
    --sh-gray-50: var(--sh-dk-gray-50);
    --sh-gray-100: var(--sh-dk-gray-100);
    --sh-gray-150: var(--sh-dk-gray-150);
    --sh-gray-200: var(--sh-dk-gray-200);
    --sh-gray-300: var(--sh-dk-gray-300);
    --sh-gray-400: var(--sh-dk-gray-400);
    --sh-gray-500: var(--sh-dk-gray-500);
    --sh-gray-600: var(--sh-dk-gray-600);
    --sh-gray-700: var(--sh-dk-gray-700);
    --sh-gray-800: var(--sh-dk-gray-800);
    --sh-gray-900: var(--sh-dk-gray-900);

    --sh-primary-50: var(--sh-dk-primary-50);
    --sh-primary-100: var(--sh-dk-primary-100);
    --sh-primary-200: var(--sh-dk-primary-200);
    --sh-violet-50: var(--sh-dk-violet-50);
    --sh-violet-100: var(--sh-dk-violet-100);
    --sh-violet-200: var(--sh-dk-violet-200);
    --sh-indigo-50: var(--sh-dk-indigo-50);
    --sh-indigo-100: var(--sh-dk-indigo-100);
    --sh-indigo-200: var(--sh-dk-indigo-200);
    --sh-pink-50: var(--sh-dk-pink-50);
    --sh-pink-100: var(--sh-dk-pink-100);
    --sh-pink-200: var(--sh-dk-pink-200);
    --sh-success-50: var(--sh-dk-success-50);
    --sh-success-100: var(--sh-dk-success-100);
    --sh-warning-50: var(--sh-dk-warning-50);
    --sh-warning-100: var(--sh-dk-warning-100);
    --sh-danger-50: var(--sh-dk-danger-50);
    --sh-danger-100: var(--sh-dk-danger-100);
    --sh-info-50: var(--sh-dk-info-50);
    --sh-info-100: var(--sh-dk-info-100);

    --sh-brand-gradient-soft: var(--sh-dk-brand-gradient-soft);

    --sh-shadow-xs: var(--sh-dk-shadow-xs);
    --sh-shadow-sm: var(--sh-dk-shadow-sm);
    --sh-shadow: var(--sh-dk-shadow);
    --sh-shadow-md: var(--sh-dk-shadow-md);
    --sh-shadow-lg: var(--sh-dk-shadow-lg);

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root[data-sh-theme='system'] {
        --sh-page-bg: var(--sh-dk-page-bg);
        --sh-surface: var(--sh-dk-surface);
        --sh-surface-alt: var(--sh-dk-surface-alt);
        --sh-surface-sunken: var(--sh-dk-surface-sunken);
        --sh-border: var(--sh-dk-border);
        --sh-border-strong: var(--sh-dk-border-strong);
    --sh-surface-veil: var(--sh-dk-surface-veil);
    --sh-surface-frost: var(--sh-dk-surface-frost);

        --sh-text: var(--sh-dk-text);
        --sh-text-strong: var(--sh-dk-text-strong);
        --sh-text-muted: var(--sh-dk-text-muted);
        --sh-text-subtle: var(--sh-dk-text-subtle);
        --sh-text-inverse: var(--sh-dk-text-inverse);
        --sh-link: var(--sh-primary-400);

        --sh-gray-25: var(--sh-dk-gray-25);
        --sh-gray-50: var(--sh-dk-gray-50);
        --sh-gray-100: var(--sh-dk-gray-100);
        --sh-gray-150: var(--sh-dk-gray-150);
        --sh-gray-200: var(--sh-dk-gray-200);
        --sh-gray-300: var(--sh-dk-gray-300);
        --sh-gray-400: var(--sh-dk-gray-400);
        --sh-gray-500: var(--sh-dk-gray-500);
        --sh-gray-600: var(--sh-dk-gray-600);
        --sh-gray-700: var(--sh-dk-gray-700);
        --sh-gray-800: var(--sh-dk-gray-800);
        --sh-gray-900: var(--sh-dk-gray-900);

        --sh-primary-50: var(--sh-dk-primary-50);
        --sh-primary-100: var(--sh-dk-primary-100);
        --sh-primary-200: var(--sh-dk-primary-200);
        --sh-violet-50: var(--sh-dk-violet-50);
        --sh-violet-100: var(--sh-dk-violet-100);
        --sh-violet-200: var(--sh-dk-violet-200);
        --sh-indigo-50: var(--sh-dk-indigo-50);
        --sh-indigo-100: var(--sh-dk-indigo-100);
        --sh-indigo-200: var(--sh-dk-indigo-200);
        --sh-pink-50: var(--sh-dk-pink-50);
        --sh-pink-100: var(--sh-dk-pink-100);
        --sh-pink-200: var(--sh-dk-pink-200);
        --sh-success-50: var(--sh-dk-success-50);
        --sh-success-100: var(--sh-dk-success-100);
        --sh-warning-50: var(--sh-dk-warning-50);
        --sh-warning-100: var(--sh-dk-warning-100);
        --sh-danger-50: var(--sh-dk-danger-50);
        --sh-danger-100: var(--sh-dk-danger-100);
        --sh-info-50: var(--sh-dk-info-50);
        --sh-info-100: var(--sh-dk-info-100);

        --sh-brand-gradient-soft: var(--sh-dk-brand-gradient-soft);

        --sh-shadow-xs: var(--sh-dk-shadow-xs);
        --sh-shadow-sm: var(--sh-dk-shadow-sm);
        --sh-shadow: var(--sh-dk-shadow);
        --sh-shadow-md: var(--sh-dk-shadow-md);
        --sh-shadow-lg: var(--sh-dk-shadow-lg);

        color-scheme: dark;
    }
}

/* The admin shell re-maps page-bg and border for its indigo scheme. Those
   sit on <body>, which is closer than <html>, so they would win over the
   dark set above unless they are re-stated here. */
:root[data-sh-theme='dark'] .sh-admin {
    --sh-page-bg: var(--sh-dk-page-bg);
    --sh-border: var(--sh-dk-border);
    --sh-link: var(--sh-primary-400);
}

@media (prefers-color-scheme: dark) {
    :root[data-sh-theme='system'] .sh-admin {
        --sh-page-bg: var(--sh-dk-page-bg);
        --sh-border: var(--sh-dk-border);
        --sh-link: var(--sh-primary-400);
    }
}