/* 24racks Cloud — core: design tokens, reset, base typography, scrollbar */

:root {
    --brand: #3b82f6;
    --brand-hover: #2563eb;
    --brand-soft: #dbeafe;
    --brand-soft-2: #eff6ff;

    --paper: #F7F3EA;
    --paper-2: #EFE8DC;
    --paper-3: #E5DDD0;

    --ink: #0D1117;
    --ink-2: #171B23;
    --ink-3: #222833;

    --muted: #6F6A60;
    --muted-2: #90887B;
    --line: #DED5C8;

    --warm: #B87939;
    --warm-soft: #F2DEC5;
    --green: #4E7656;
    --green-soft: #E3ECE1;
    --danger: #B84A3A;
    --danger-soft: #F5D7D0;

    --surface: rgba(255, 255, 255, .58);
    --surface-strong: rgba(255, 255, 255, .78);
    --surface-muted: rgba(239, 232, 220, .72);
    --surface-dark: #0D1117;
    --surface-dark-2: #171B23;
    --surface-dark-3: #222833;

    --text-1: var(--ink);
    --text-2: var(--muted);
    --text-3: var(--muted-2);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    --shadow-card: none;
    --shadow-hover: none;
    --shadow-focus: 0 0 0 3px rgba(59, 130, 246, .22);
    --shadow-btn: none;

    --transition-base: .16s ease;
    --transition-slow: .22s ease;
    --header-height: 72px;

    --bg-root: var(--paper);
    --bg-surface: var(--surface);
    --bg-raised: var(--surface);
    --bg-elevated: var(--surface-strong);
    --bg-hover: rgba(59, 130, 246, .06);
    --border-dim: rgba(13, 17, 23, .10);
    --border: rgba(13, 17, 23, .14);
    --border-strong: rgba(13, 17, 23, .22);
    --blue: var(--brand);
    --blue-hover: var(--brand-hover);
    --blue-active: #1d4ed8;
    --blue-dim: rgba(59, 130, 246, .12);
    --blue-border: rgba(59, 130, 246, .26);
    --blue-text: var(--brand);

    --color-bg-base: var(--bg-root);
    --color-bg-deep: var(--paper-2);
    --color-bg-card: var(--bg-raised);
    --color-bg-raised: var(--bg-elevated);
    --color-bg-border: var(--border-dim);
    --color-text-primary: var(--text-1);
    --color-text-secondary: var(--text-2);
    --color-text-muted: var(--text-3);
    --color-text-link: var(--brand);
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: var(--brand);
    --color-primary-600: var(--brand-hover);
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
    --color-accent-border: var(--blue-border);
    --color-accent-glow: var(--blue-dim);
    --color-accent-hover: rgba(59, 130, 246, .10);
    --color-success: var(--green);
    --color-warning: var(--warm);
    --color-danger: var(--danger);
    --color-info: var(--brand);
}

:root[data-theme="dark"] {
    --bg-root: #0D1117;
    --bg-surface: rgba(255, 255, 255, .055);
    --bg-raised: rgba(255, 255, 255, .065);
    --bg-elevated: rgba(255, 255, 255, .09);
    --bg-hover: rgba(255, 255, 255, .075);
    --border-dim: rgba(255, 255, 255, .10);
    --border: rgba(255, 255, 255, .14);
    --border-strong: rgba(255, 255, 255, .20);
    --text-1: #F7F3EA;
    --text-2: #CFC7B9;
    --text-3: #90887B;
    --surface: rgba(255, 255, 255, .065);
    --surface-strong: rgba(255, 255, 255, .095);
    --surface-muted: rgba(255, 255, 255, .045);
    --blue-text: #93c5fd;
    --blue-dim: rgba(59, 130, 246, .18);
    --blue-border: rgba(147, 197, 253, .30);
    --green-soft: rgba(78, 118, 86, .20);
    --warm-soft: rgba(184, 121, 57, .20);
    --danger-soft: rgba(184, 74, 58, .20);
    --shadow-card: none;
    --shadow-hover: none;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    min-height: 100%;
    margin: 0;
    color: var(--text-2);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    background: var(--paper);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root[data-theme="dark"] body {
    color: var(--text-2);
    background: #0D1117;
}

h1, h2, h3, h4, h5, h6,
.font-heading,
.font-display {
    color: var(--text-1);
    font-family: var(--font-display);
    font-weight: 760;
    line-height: 1.08;
    letter-spacing: 0;
}

.font-mono {
    font-family: var(--font-mono);
}

a {
    color: var(--brand);
    text-decoration: none;
    transition: color var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}

a:hover {
    color: var(--brand-hover);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.site-skip-link {
    position: absolute;
    top: 12px;
    left: 16px;
    z-index: 2000;
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    color: #fff;
    background: var(--brand);
    box-shadow: var(--shadow-focus);
    transform: translateY(-160%);
    transition: transform var(--transition-base);
}

.site-skip-link:focus {
    transform: translateY(0);
}

[id] {
    scroll-margin-top: calc(var(--header-height) + 24px);
}

::selection {
    background: var(--brand-soft);
    color: var(--ink);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 999px;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
}


/* Suppress legacy decorative classes (kept as no-op so old markup is harmless). */
.glow-orb,
.glow-orb-cyan,
.glow-orb-blue,
.glow-orb-warm,
.scanline,
.tech-lines {
    display: none !important;
}

/* Body radial background — sober paper wash. */
body {
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(59, 130, 246, .055), transparent 60%),
        var(--paper);
    background-attachment: fixed;
}

:root[data-theme="dark"] body {
    background:
        radial-gradient(ellipse 80% 60% at 50% -10%, rgba(59, 130, 246, .09), transparent 60%),
        #0D1117;
    background-attachment: fixed;
}

@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
    body,
    :root[data-theme="dark"] body {
        background-attachment: scroll;
    }
}