:root {
    --brand: #0F172A;
    --brand-2: #2B5EEC;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --surface-3: #f5f5f5;
    --bg-app: #f6f7f9;         /* page background */
    --bg-sidebar: #eef1f5; 

    --text: var(--brand);
    --muted: #475569;
    --muted-strong: #334155;
    --muted-soft: #64748b;
    --neutral-100: #f1f5f9;
    --neutral-250: #d0d9e4;
    --neutral-300: #cbd5e1;

    --ink-04: rgba(0, 0, 0, .04);
    --ring: rgba(0, 0, 0, .08);
    --shadow: 0 10px 30px rgba(2, 8, 23, .06), 0 2px 8px rgba(2, 8, 23, .04);
    --shadow-white: 0 0 10px rgba(255, 255, 255, .25), 0 0 20px rgba(255, 255, 255, .15);
    --shadow-hover: 0 16px 50px rgba(18, 18, 55, .10);
    --transition-fast: .25s ease;
    --header-h: 68px;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius: 16px;

    --grid-size: 24px;
    --dot-size: 2px;
    --dot-gap: 18px;
    --dot-color: rgba(2, 6, 23, .10);

    --section-pad: 80px;
    --container-pad: 24px;

    --logo-size: 36px;

    --border: 1px solid var(--ring);

    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --sl-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";

    --sl-color-primary-600: var(--brand-2);
    --sl-color-primary-500: color-mix(in oklab, var(--brand-2) 80%, white);
    --sl-color-primary-700: color-mix(in oklab, var(--brand-2) 90%, black);
    --sl-focus-ring-color-primary: color-mix(in oklab, var(--brand-2) 35%, transparent);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);

}

a {
    color: inherit;
    text-decoration: none;
}

.logo-styling {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--container-pad);
}