/* ═══════════════════════════════════════════
   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-secondary: var(--text-muted);
    --text-faint: #94A3B8;
    --text-on-primary: #FFFFFF;
    --text-on-dark: #FFFFFF;
    --text-on-dark-muted: rgba(255, 255, 255, .78);
    --text-on-dark-faint: rgba(255, 255, 255, .65);
    --text-on-dark-subtle: rgba(255, 255, 255, .85);
    --border-on-dark: rgba(255, 255, 255, .14);
    --border-on-brand: rgba(255, 255, 255, .34);

    /* Brand — discovered from workspace theme.ts */
    --color-primary-teal: #3ca5a5;
    --color-primary-teal-hover: #318a8a;
    --color-accent-teal: #4FD1C5;
    --color-teal-bg: #F0FAFA;
    --color-primary-action: #0D9488;
    --color-primary-action-hover: #0F766E;
    --color-warning: #92400E;
    --color-warning-bg: #FEF3C7;
    --color-warning-border: #FCD34D;
    --color-error: #D32F2F;
    --color-error-bg: #FFEBEE;
    --color-error-border: #FFCDD2;
    --color-success: #2E7D32;
    --color-success-bg: #E8F5E9;
    --color-success-border: #C8E6C9;
    --color-info: #1565C0;
    --color-info-bg: #E3F2FD;
    --color-info-border: #BBDEFB;
    --color-accent-orange: #F6821F;
    --color-focus-ring: rgba(0, 150, 136, 0.1);
    --color-teal-border: #B2E4E4;
    --color-closing-start: #2F9B9B;
    --color-closing-end: #277F84;

    /* 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);
    --form-textarea-max-height: 280px;
}

/* ═══════════════════════════════════════════
   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);
    }
}