/*
 * Openforce Design System - CSS Variables
 * Mapped from Figma specifications (.design-engineer/system.md)
 *
 * Usage: Reference these variables in component styles to maintain
 * consistency with the Figma design system.
 */

:root {
    /* ============================================
     * COLOR PALETTE
     * ============================================ */

    /* Primary Brand Colors */
    --of-primary: #11166A;
    --of-primary-dark: #0B0F47;
    --of-primary-light: #304CA0;
    --of-secondary: #305DC5;
    --of-secondary-light: #3A5CC0;
    --of-accent: #F5A623;
    --of-accent-dark: #FBB54B;
    --of-accent-orange: #E27E31;
    --of-accent-burnt: #C15D10;
    --of-gray: #9E9E9E;

    /* Background Colors */
    --of-bg-page: #F2F9FE;
    --of-bg-page-alt: #F5F5F5;
    --of-bg-surface: #FFFFFF;
    --of-bg-dark: #464B50;
    --of-bg-content: #000000;

    /* Text Colors */
    --of-text-primary: #191D24;
    --of-text-secondary: #27292C;
    --of-text-on-dark: #FFFFFF;
    --of-text-on-white: #FFFFFF;
    --of-text-muted: #424242;

    /* Semantic Colors */
    --of-success: #3FA242;
    --of-info: #47A7F5;
    --of-warning: #FBB54B;
    --of-error: #C81927;
    --of-error-light: #E42535;
    --of-error-bg: rgba(244, 67, 54, 0.06);
    --of-info-6: rgba(71, 167, 245, 0.06);

    /* UI Element Colors */
    --of-divider: #E0E0E0;
    --of-border: #BDBDBD;
    --of-switch: #0E135B;
    --of-badge: #BDBDBD;
    --of-input-bg: #FFFFFF;

    /* ============================================
     * TYPOGRAPHY
     * ============================================ */

    /* Font Family */
    --of-font-primary: 'Lato', system-ui, -apple-system, sans-serif;
    --of-font-signature: 'Qwitcher Grypen', cursive;

    /* Font Sizes (from Figma spec) */
    --of-text-xs: 11px;
    --of-text-sm: 12px;
    --of-text-base: 13px;
    --of-text-lg: 14px;
    --of-text-xl: 15px;
    --of-text-2xl: 16px;
    --of-text-3xl: 18px;
    --of-text-4xl: 20px;

    /* Font Weights */
    --of-font-normal: 400;
    --of-font-medium: 500;
    --of-font-semibold: 600;
    --of-font-bold: 700;

    /* Line Heights (common values from Figma) */
    --of-leading-tight: 14px;
    --of-leading-snug: 19px;
    --of-leading-normal: 24px;
    --of-leading-relaxed: 28px;
    --of-leading-loose: 32px;
    --of-leading-display: 43px;

    /* ============================================
     * SPACING SCALE
     * ============================================ */

    /* Base Figma Spacing (2-18px) */
    --of-space-1: 2px;
    --of-space-2: 3px;
    --of-space-3: 4px;
    --of-space-4: 6px;
    --of-space-5: 7px;
    --of-space-6: 8px;
    --of-space-8: 9px;
    --of-space-10: 10px;
    --of-space-12: 12px;
    --of-space-14: 14px;
    --of-space-16: 16px;
    --of-space-18: 18px;

    /* Extended Spacing (beyond Figma base) */
    --of-space-20: 20px;
    --of-space-24: 24px;
    --of-space-28: 28px;
    --of-space-32: 32px;
    --of-space-36: 36px;
    --of-space-40: 40px;
    --of-space-48: 48px;
    --of-space-56: 56px;
    --of-space-64: 64px;
    --of-space-72: 72px;
    --of-space-80: 80px;
    --of-space-96: 96px;
    --of-space-100: 100px;
    --of-space-120: 120px;

    /* ============================================
     * BORDER RADIUS
     * ============================================ */

    --of-radius-sm: 2px;
    --of-radius-md: 4px;
    --of-radius-lg: 8px;
    --of-radius-xl: 9px;
    --of-radius-2xl: 10px;
    --mud-lg-border-radius: 16px;
    --of-radius-3xl: 20px;
    --of-radius-4xl: 24px;
    --of-radius-pill: 40px;   /* Intentional deviation: pill-shaped cards */
    --of-radius-full: 9999px;

    /* ============================================
     * SHADOWS
     * ============================================ */

    /* Subtle shadows (for cards, inputs) */
    --of-shadow-sm:
        0px 5px 5px -3px rgba(0, 0, 0, 0.06),
        0px 8px 10px 1px rgba(0, 0, 0, 0.04),
        0px 3px 14px 2px rgba(0, 0, 0, 0.04);

    /* Card shadows */
    --of-shadow-card:
        0px 5px 5px -3px rgba(0, 0, 0, 0.06),
        0px 8px 10px 1px rgba(0, 0, 0, 0.04),
        0px 3px 14px 2px rgba(0, 0, 0, 0.04);

    /* Card hover shadows */
    --of-shadow-card-hover:
        0px 8px 8px -4px rgba(0, 0, 0, 0.08),
        0px 12px 16px 2px rgba(0, 0, 0, 0.06),
        0px 6px 20px 4px rgba(0, 0, 0, 0.08);

    /* Input field shadows */
    --of-shadow-input:
        0px 5px 5px rgba(0, 0, 0, 0.02),
        0px 8px 10px 1px rgba(0, 0, 0, 0.02),
        0px 3px 14px 2px rgba(0, 0, 0, 0.02);

    /* Icon shadows */
    --of-shadow-icon:
        0px 2px 4px rgba(0, 0, 0, 0.1),
        0px 4px 5px rgba(0, 0, 0, 0.08),
        0px 1px 10px rgba(0, 0, 0, 0.06);

    /* Brand glow (for CTAs) */
    --of-shadow-brand: 0px 4px 24px rgba(48, 93, 197, 0.3);

    /* ============================================
     * COMPONENT SIZES
     * ============================================ */

    /* Button heights */
    --of-btn-height-sm: 32px;
    --of-btn-height-md: 36px;
    --of-btn-height-lg: 48px;

    /* Input heights */
    --of-input-height: 56px;

    /* Card heights */
    --of-card-height-sm: 72px;
    --of-card-height-md: 80px;

    /* Icon sizes */
    --of-icon-sm: 24px;
    --of-icon-md: 48px;
    --of-icon-lg: 56px;
    --of-icon-xl: 64px;

    /* Container widths */
    --of-container-mobile: 392px;
    --of-container-max: 100%;

    /* Fixed bars */
    --of-bar-height-sm: 100px;
    --of-bar-height-md: 120px;

    /* ============================================
     * TRANSITIONS
     * ============================================ */

    --of-transition-fast: 0.15s ease;
    --of-transition-normal: 0.2s ease;
    --of-transition-slow: 0.3s ease;

    /* ============================================
     * Z-INDEX SCALE
     * ============================================ */

    --of-z-dropdown: 50;
    --of-z-sticky: 100;
    --of-z-fixed: 200;
    --of-z-modal: 300;
    --of-z-toast: 400;
}

/* ============================================
 * DARK MODE VARIABLES
 * Based on Figma dark theme extrapolation
 * ============================================ */

[data-theme="dark"],
.mud-theme-dark {
    --of-bg-page: #1a1a27;
    --of-bg-page-alt: #151521;
    --of-bg-surface: #1e1e2d;
    --of-bg-dark: #1a1a27;

    --of-text-primary: #b2b0bf;
    --of-text-secondary: #92929f;
    --of-text-muted: #74718e;

    --of-primary: #7e6fff;
    --of-secondary: #4a86ff;

    --of-success: #3dcb6c;
    --of-warning: #ffb545;
    --of-error: #ff3f5f;
    --of-info: #4a86ff;

    --of-divider: #292838;
    --of-border: #33323e;
}

/* ============================================
 * UTILITY CLASSES
 * ============================================ */

/* Background utilities */
.of-bg-page { background-color: var(--of-bg-page); }
.of-bg-surface { background-color: var(--of-bg-surface); }
.of-bg-primary { background-color: var(--of-primary); }
.of-bg-secondary { background-color: var(--of-secondary); }

/* Text utilities */
.of-text-primary { color: var(--of-text-primary); }
.of-text-secondary { color: var(--of-text-secondary); }
.of-text-on-dark { color: var(--of-text-on-dark); }

/* Shadow utilities */
.of-shadow-card { box-shadow: var(--of-shadow-card); }
.of-shadow-card-hover { box-shadow: var(--of-shadow-card-hover); }

/* Font family */
.of-font-primary { font-family: var(--of-font-primary); }