:root {

    /* Font Family */
    --font-primary: 'Zoho Puvi', Arial, sans-serif;
    --font-heading: 'Zoho Puvi', Arial, sans-serif;

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: normal;
    --font-weight-bold: bold;

    /* Primary Colors */
    --color-bg-primary: #18181C;
    /* Main background dark blue */
    --color-bg-secondary: #444550;
    /* Card/container background */
    --color-bg-tertiary: #21222D;
    /* Input fields, buttons background */
    --color-bg-highlight: #6C6D7A;

    /* Text Colors */
    --color-text-primary: #FFFFFF;
    /* Main text color */
    --color-text-secondary: #B6B8C9;
    /* Secondary text, labels */
    --color-text-muted: #81818C;
    /* Muted text */

    /* Brand Colors */
    --color-accent: #5A7AFF;
    /* Primary accent - teal */
    --color-accent-dark: #2d8a7e;
    /* Darker accent for hover states */
    --color-accent-subtle: rgba(81, 191, 180, 0.1);
    /* For subtle backgrounds */
    --color-accent-border: #247068;
    /* For borders */

    /* Additional Colors */
    --color-ai: #8a2be2;
    /* AI feature purple */
    --color-ai-hover: #9b4ddb;
    /* AI hover state */

    /* Status Colors */
    --color-success: #4caf50;
    /* Completed */
    --color-success-bg: rgba(76, 175, 80, 0.2);
    --color-pending: #8b949e;
    /* Not started */
    --color-pending-bg: rgba(139, 148, 158, 0.2);
    --color-error: #f85149;
    /* Error */
    --color-in-progress: #FFBD4C;
    /* Warning */

    /* Borders and Dividers */
    --color-border: #30363d;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* Zoho Puvi Regular */
@font-face {
    font-family: 'Zoho Puvi';
    src: url('../assets/fonts/Zoho\ Puvi/Zoho\ Puvi\ Regular.woff2') format('woff2'),
        url('../assets/fonts/Zoho\ Puvi/Zoho\ Puvi\ Regular.woff') format('woff'),
        url('../assets/fonts/Zoho\ Puvi/Zoho\ Puvi\ Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Zoho Puvi Light */
@font-face {
    font-family: 'Zoho Puvi';
    src: url('../assets/fonts/Zoho\ Puvi/Zoho\ Puvi\ Light.woff2') format('woff2'),
        url('../assets/fonts/Zoho\ Puvi/Zoho\ Puvi\ Light.woff') format('woff'),
        url('../assets/fonts/Zoho\ Puvi/Zoho\ Puvi\ Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Zoho Puvi Bold */
@font-face {
    font-family: 'Zoho Puvi';
    src: url('../assets/fonts/Zoho\ Puvi/Zoho\ Puvi\ Bold.woff2') format('woff2'),
        url('../assets/fonts/Zoho\ Puvi/Zoho\ Puvi\ Bold.woff') format('woff'),
        url('../assets/fonts/Zoho\ Puvi/Zoho\ Puvi\ Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

.btn {
    display: inline-block;
    padding: 10px 15px;
    background-color: var(--color-accent);
    color: var(--color-text-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 15px;
    max-width: 150px;
    margin: 10px;
}