/* ═══════════════════════════════════════════
   DESIGN TOKENS, BASICS & ANIMATIONS
═══════════════════════════════════════════ */

:root {
    /* Surfaces */
    --bg-off-white: #F8FAFC;
    --surface-white: #FFFFFF;

    /* Borders */
    --border-subtle: #E2E8F0;
    --border-strong: #CBD5E1;

    /* Typography */
    --text-main: #0F172A;
    --text-muted: #475569;
    --text-faint: #94A3B8;

    /* Brand — discovered from workspace theme.ts */
    --color-primary-teal: #3ca5a5;
    --color-primary-teal-hover: #318a8a;
    --color-accent-teal: #4FD1C5;
    --color-teal-bg: #F0FAFA;

    /* Danger / Legacy */
    --color-red: #E11D48;
    --color-red-bg: #FFF1F2;

    /* Fonts — IBM Plex family, matching the RaviOps product UI (theme.ts) */
    --font-primary: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    background-color: var(--surface-white);
    color: var(--text-main);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

ul {
    list-style: none;
}

/* Linework icon vocabulary (Problem / Why RâviOps / Built for the Field) — small, monochrome, anchors not decoration */
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 24;
}

.theme-icon {
    font-size: 1.375rem;
    color: var(--color-primary-teal);
    line-height: 1;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   KEYFRAMES & KEY ANIMATIONS
═══════════════════════════════════════════ */
@keyframes scrollTicker {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes fadeTextIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}