@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Brand Colors */
:root {
    /* Primary Colors */
    --brand-orange: #DE5931;      /* RGB(222, 89, 49) */
    --brand-green: #45D664;       /* RGB(69, 214, 100) */
    --brand-brown: #5C1400;       /* RGB(92, 20, 0) */
    --brand-turquoise: #28D4E0;   /* RGB(40, 212, 224) */
    --brand-yellow: #eaf967;      /* RGB(239, 250, 137) */
    --brand-pink: #FCBBF4;        /* RGB(242, 107, 131) */
    --brand-white: #FFFFFF;       /* RGB(255, 255, 255) */

    --brand-orange-light: #f1b8a7;
    --brand-green-light: #abedba;
    --brand-brown-light: #ffaf99;
    --brand-turquoise-light: #a6edf2;
    --brand-yellow-light: #f1fb9d;
    --brand-pink-light: #f9b9c4;

    --brand-orange-dark: #581f0e;
    --brand-green-dark: #125421;
    --brand-brown-dark: #290900;
    --brand-turquoise-dark: #0d5459;
    --brand-yellow-dark: #586204;
    --brand-pink-dark: #5e0818;

    --action-primary: var(--brand-turquoise);
    --action-secondary: var(--brand-orange);

    --persona-gogetter: var(--brand-orange);
    --persona-connector: var(--brand-turquoise);
    --persona-strategist: var(--brand-pink);
    --persona-innovator: var(--brand-green);
    --persona-chameleon: var(--brand-brown);
    --persona-bridgebuilder: var(--brand-yellow);
    --persona-anchor: var(--brand-turquoise);

    --persona-gogetter-light: var(--brand-orange-light);
    --persona-connector-light: var(--brand-turquoise-light);
    --persona-strategist-light: var(--brand-pink-light);
    --persona-innovator-light: var(--brand-green-light);
    --persona-chameleon-light: var(--brand-brown-light);
    --persona-bridgebuilder-light: var(--brand-yellow-light);
    --persona-anchor-light: var(--brand-turquoise-light);

    --persona-gogetter-dark: var(--brand-orange-dark);
    --persona-connector-dark: var(--brand-turquoise-dark);
    --persona-strategist-dark: var(--brand-pink-dark);
    --persona-innovator-dark: var(--brand-green-dark);
    --persona-chameleon-dark: var(--brand-brown-dark);
    --persona-bridgebuilder-dark: var(--brand-yellow-dark);
    --persona-anchor-dark: var(--brand-turquoise-dark);

    /* Gradients */
    --brand-gradient-primary: linear-gradient(96deg, var(--brand-orange) 0%, var(--brand-turquoise) 100%);
    --brand-gradient-secondary: linear-gradient(45deg, var(--brand-green), var(--brand-pink));

    /* Background Colors */
    --surface-1: var(--brand-white);
    --surface-2: var(--brand-yellow);

    /* Text Colors */
    --text-primary: var(--brand-brown);
    --text-secondary: var(--brand-brown);
}

/* Typography   (we will update it later) */
:root {
    --font-family-primary: "Poppins", sans-serif;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 800;

    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
}

* {
    font-family: var(--font-family-primary);
}

/* Common Components */
.brand-button {
    background: var(--brand-orange);
    font-weight: var(--font-weight-regular);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    color: var(--brand-white);
    transition: transform 0.2s ease-in-out;
}

.brand-button:hover {
    transform: translateY(-2px);
    background: var(--brand-turquoise);
}

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.gradient-text {
    background: var(--brand-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: var(--font-weight-bold);
}

/* Typography Classes */
.heading-primary {
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.text-body {
    font-weight: var(--font-weight-regular);
    color: var(--text-secondary);
}

/* Additional Utility Classes */
.bg-primary {
    background-color: var(--brand-orange);
}

.bg-secondary {
    background-color: var(--brand-turquoise);
}

.text-gradient {
    background: var(--brand-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.accent-yellow {
    color: var(--brand-yellow);
}

.accent-pink {
    color: var(--brand-pink);
}