/* YesStreaming design tokens (qq.yesstra.com)
   Single source for colours, type, radius and shadows.
   Layer 1 primitives: raw values, never used directly in components.
   Layer 2 semantic: what a value means (text, surface, brand); components use these.
   Layer 3 component: scoped overrides for one component (hero).
   To change the palette, edit layer 2 only. */

:root {
    /* ---------- Layer 1: primitives ---------- */
    --pink-500: #e2499f;
    --pink-600: #c93e8f;
    --purple-500: #a35bd8;
    --violet-300: #c4b5fd;
    --violet-400: #c084fc;
    --violet-600: #7c4dea;
    --violet-900: #2a1a6e;
    --indigo-500: #6f6cf6;
    --indigo-600: #5a57e0;

    --lavender-50: #fdf9fe;
    --lavender-100: #f6effc;
    --lavender-150: #f5effc;
    --lavender-200: #ebe4fa;

    --ink-900: #14152b;
    --ink-600: #4b4f6b;
    --ink-500: #6b6f8a;
    --ink-100: #e6e7f2;

    --night-950: #0b0618;
    --night-900: #170f33;
    --plum-900: #1d1442;
    --plum-700: #4a2a8a;
    --plum-300: #c9a7f0;
    --plum-50: #f7f1fd;
    --rose-100: #f3d9f0;

    --slate-950: #05070c;
    --slate-925: #0f141d;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-400: #94a3b8;
    --slate-200: #e2e8f0;
    --slate-100: #eef1f5;

    --white: #ffffff;

    /* ---------- Layer 2: semantic ---------- */
    --color-bg: var(--white);
    --color-text: var(--ink-600);
    --color-text-strong: var(--ink-900);
    --color-text-muted: var(--ink-500);
    --color-line: var(--ink-100);
    --color-line-soft: var(--color-line);

    --color-surface-tint: var(--lavender-50);
    --color-surface-soft: var(--lavender-100);
    --color-surface-hover: var(--lavender-150);
    --color-panel-a: var(--lavender-50);
    --color-panel-b: var(--lavender-100);
    --color-panel-c: var(--lavender-200);
    --grad-panel: linear-gradient(135deg, var(--color-panel-a) 0%, var(--color-panel-b) 55%, var(--color-panel-c) 100%);
    --grad-panel-rev: linear-gradient(225deg, var(--color-panel-a) 0%, var(--color-panel-b) 55%, var(--color-panel-c) 100%);

    --color-brand: var(--pink-600);
    --color-brand-strong: var(--indigo-600);
    --grad-brand: linear-gradient(90deg, var(--pink-500) 0%, var(--purple-500) 50%, var(--indigo-500) 100%);

    --color-accent: var(--violet-600);
    --color-accent-deep: var(--violet-900);
    --accent-rgb: 124, 77, 234;
    --color-icon-light: var(--violet-400);
    --color-dot: var(--violet-300);
    --grad-icon-pink: linear-gradient(135deg, #f9a8d4 0%, var(--pink-500) 55%, var(--pink-600) 100%);
    --glow-pink: 0 12px 24px -12px rgba(226, 73, 159, 0.85);

    --color-night: var(--night-950);
    --color-night-2: var(--night-900);
    --color-hero-1: var(--plum-900);
    --color-hero-2: var(--plum-700);
    --color-hero-3: var(--plum-300);
    --color-hero-4: var(--plum-50);
    --color-side-glow: rgba(226, 73, 159, 0.25);
    --color-sub: var(--rose-100);
    --grad-accent-text: linear-gradient(90deg, #fde2f3 0%, #f9a8d4 45%, #a5a3ff 100%);

    --glass: rgba(255, 255, 255, 0.58);
    --glass-strong: var(--glass);
    --glass-line: rgba(255, 255, 255, 0.9);
    --glow: 0 14px 32px -8px rgba(var(--accent-rgb), 0.65);
    --shadow-md: 0 24px 60px -30px rgba(15, 23, 42, 0.30);

    --color-emphasis: var(--slate-800);

    /* Feature icon tints (c4 kept for markup compatibility). */
    --c1: #3b82f6;
    --c1-bg: #eff6ff;
    --c2: #8b5cf6;
    --c2-bg: #f5f3ff;
    --c3: #14b8a6;
    --c3-bg: #f0fdfa;
    --c4: #22c55e;
    --c4-bg: #f0fdf4;
    --c5: #ec4899;
    --c5-bg: #fdf2f8;
    --c6: #6366f1;
    --c6-bg: #eef2ff;
    --pink: #ec4899;
    --pink-bg: #fdf2f8;

    --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --radius-md: 16px;
}

/* ---------- Layer 3: component tokens ---------- */

/* Slate dark surfaces: homepage hero, inner page heroes and dark sections share one look. */
.hx-hero,
main > header.header,
main > header.section,
main > .header:first-child,
main section.bg-black,
main section.bg-dark,
main .bg-black:not(header) {
    --color-hero-end: var(--slate-600);
    --color-night: var(--slate-950);
    --color-night-2: var(--slate-925);
    --color-hero-1: var(--slate-800);
    --color-hero-2: var(--slate-700);
    --color-hero-3: var(--slate-400);
    --color-hero-4: var(--slate-100);
    --color-side-glow: rgba(148, 163, 184, 0.22);
    --color-sub: var(--slate-200);
}

/* Homepage and inner page heroes: soft brand-pink glow on the Slate background. */
.hx-hero,
main > header.header,
main > header.section,
main > .header:first-child {
    --color-side-glow: rgba(226, 73, 159, 0.28);
}