:root {
/* --- FIBER USTA BRAND TOKENS --- */
--fu-primary: #0f6fe8;
--fu-primary-hover: #0b5fd7;
--fu-primary-light: #eaf4ff;
--fu-secondary: #38bdf8;
--fu-heading: #0f2747;
--fu-heading-deep: #081a33;
--fu-text: #142033;
--fu-muted: #52657a;
--fu-bg: #ffffff;
--fu-bg-alt: #f5f9fd;
--fu-border: #d8e5f2;
--fu-success: #168a5b;
--fu-warning: #b86a0b;
--fu-danger: #c43d4d;

/* --- COLOR TOKENS (LIGHT THEME) --- */
--sp-color-primary: var(--fu-primary);
--sp-color-primary-light: #2d8cff;
--sp-color-primary-dark: var(--fu-heading);
--sp-primary-rgb: 15, 111, 232;
--primary-blue: var(--sp-color-primary);
--sp-color-secondary: #263238;
--sp-color-secondary-light: #455a64;

--sp-color-accent: var(--fu-secondary);
--sp-color-accent-hover: var(--fu-primary-hover);

--sp-color-success: #25d366;
--sp-color-warning: #ffc107;
--sp-color-danger: #d32f2f;
--sp-color-info: #00b0ff;

/* Neutral Scale */
--sp-neutral-0: #ffffff;
--sp-neutral-50: #f8f9fa;
--sp-neutral-100: #f1f3f5;
--sp-neutral-200: #e9ecef;
--sp-neutral-300: #dee2e6;
--sp-neutral-400: #ced4da;
--sp-neutral-500: #adb5bd;
--sp-neutral-600: #868e96;
--sp-neutral-700: #495057;
--sp-neutral-800: #343a40;
--sp-neutral-900: #212529;
--sp-neutral-1000: #000000;

/* Semantic Surface & Border */
--sp-surface-main: var(--sp-neutral-0);
--sp-surface-subtle: var(--sp-neutral-50);
--bg-light: var(--sp-surface-subtle);
--sp-surface-card: var(--sp-neutral-0);
--sp-surface-input: var(--sp-neutral-0);
--sp-surface-inverse: var(--sp-neutral-900);

--sp-border-color: var(--sp-neutral-200);
--sp-border-color-strong: var(--sp-neutral-300);

--sp-text-main: var(--sp-neutral-900);
--sp-text-muted: var(--sp-neutral-700);
--sp-text-light: var(--sp-neutral-600);
--sp-text-inverse: var(--sp-neutral-0);

/* --- TYPOGRAPHY TOKENS (FLUID SCALE) --- */
--sp-font-family: 'Inter', system-ui, -apple-system, sans-serif;
--sp-font-mono: 'Roboto Mono', monospace;

--sp-font-size-h1: clamp(2.25rem, 5vw, 3rem);
--sp-font-size-h2: clamp(1.75rem, 4vw, 2.25rem);
--sp-font-size-h3: clamp(1.375rem, 3vw, 1.75rem);
--sp-font-size-h4: clamp(1.125rem, 2vw, 1.375rem);
--sp-font-size-body: 1.0625rem; /* 17px */
--sp-font-size-sm: 1rem;        /* 16px */
--sp-font-size-xs: 0.875rem;    /* 14px */

--sp-font-weight-regular: 400;
--sp-font-weight-medium: 500;
--sp-font-weight-semibold: 600;
--sp-font-weight-bold: 700;
--sp-font-weight-black: 900;

--sp-line-height-tight: 1.2;
--sp-line-height-base: 1.6;
--sp-line-height-loose: 1.8;

/* --- SPACING TOKENS (8px BASE) --- */
--sp-spacing-1: 0.25rem; /* 4px */
--sp-spacing-2: 0.5rem;  /* 8px */
--sp-spacing-3: 0.75rem; /* 12px */
--sp-spacing-4: 1rem;    /* 16px */
--sp-spacing-5: 1.5rem;  /* 24px */
--sp-spacing-6: 2rem;    /* 32px */
--sp-spacing-8: 3rem;    /* 48px */
--sp-spacing-10: 4rem;   /* 64px */
--sp-spacing-12: 6rem;   /* 96px */
--sp-spacing-16: 8rem;
--sp-spacing-20: 10rem;

/* --- RADIUS TOKENS --- */
--sp-radius-none: 0;
--sp-radius-sm: 6px;
--sp-radius-md: 10px;
--sp-radius-lg: 14px;
--sp-radius-xl: 24px;
--sp-radius-pill: 9999px;

/* --- SHADOW TOKENS --- */
--sp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--sp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--sp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--sp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--sp-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

/* --- TRANSITION TOKENS --- */
--sp-transition-fast: 150ms ease;
--sp-transition-base: 250ms ease-in-out;
--sp-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

/* --- Z-INDEX TOKENS --- */
--sp-z-hide: -1;
--sp-z-base: 1;
--sp-z-dropdown: 1000;
--sp-z-sticky: 1020;
--sp-z-fixed: 1030;
--sp-z-modal: 1040;
--sp-z-popover: 1050;
--sp-z-tooltip: 1060;

/* --- CONTAINER & BREAKPOINTS --- */
--sp-container-max: 1320px;
--sp-breakpoint-xs: 0;
--sp-breakpoint-sm: 576px;
--sp-breakpoint-md: 768px;
--sp-breakpoint-lg: 992px;
--sp-breakpoint-xl: 1200px;
--sp-breakpoint-xxl: 1400px;
}