:root {
    /* COLORS */
    /* Base */
    --color-base-black: #000000;
    --color-base-white: #FFFFFF;
    --light: rgba(255, 255, 255, 0.2);

    /* Accent */
    --color-accent-500: #0A7287;

    /* Surface / Background */
    --color-surface-app: #FAFAFA;
    --color-surface-neutral: #C9CBCA;
    --surface: #FFFFFF;
    --surface-alt: #F8FAFC;

    /* Border */
    --color-border-container: #E5E7EB;
    --color-border-input: #7B7B7B;
    --color-border-input-focus: #077574;
    /* Shorthand aliases used in pages */
    --Border-Containers: var(--color-border-container);
    --Border-inputs: var(--color-border-input);
    --border-200: var(--color-border-container);

    /* Feedback - Info */
    --color-feedback-info-100: #EBF3FF;
    --color-feedback-info-500: #85A1CC;
    --color-feedback-info-700: #1952A6;

    /* Feedback - Negative */
    --color-feedback-negative-100: #FFEBF4;
    --color-feedback-negative-500: #CC8585;
    --color-feedback-negative-700: #A61919;

    /* Feedback - Positive */
    --color-feedback-positive-100: #EEFFEB;
    --color-feedback-positive-500: #90CC84;
    --color-feedback-positive-700: #27B812;

    /* Feedback - Warning */
    --color-feedback-warning-100: #FFF6EB;
    --color-feedback-warning-500: #CCAD85;
    --color-feedback-warning-700: #A66919;

    /* Neutral (Gray scale) */
    --color-neutral-50: #F5F5F5;
    --color-neutral-100: #E9E9E9;
    --color-neutral-200: #D9D9D9;
    --color-neutral-300: #C4C4C4;
    --color-neutral-400: #9D9D9D;
    --color-neutral-500: #5F5F5F;
    --color-neutral-600: #555555;
    --color-neutral-700: #434343;
    --color-neutral-800: #262626;
    --color-neutral-900: #111827;
    --color-neutral-950: #030712;

    /* Brand Primary */
    --color-brand-primary-50: #EFFFF7;
    --color-brand-primary-100: #DAFEED;
    --color-brand-primary-200: #87FBDC;
    --color-brand-primary-300: #7FF6C1;
    --color-brand-primary-400: #32E696;
    --color-brand-primary-500: #17D07E;
    --color-brand-primary-600: #0DAC66;
    --color-brand-primary-700: #0E8752;
    --color-brand-primary-800: #116A44;
    --color-brand-primary-900: #10573A;
    --color-brand-primary-950: #02311F;

    /* Specific colors */
    --Specific-colors-Yellow: #FFDD00;
    --Specific-colors-Cold-green: #07B59A;
    --Specific-colors-Sky-blue: #28ABE3;
    --Specific-colors-Red: #FF0000;
    --Specific-colors-Orange: #FF8000;
    --Specific-colors-Pink: #E4097D;
    --Specific-colors-Green: #23E589;

    /* Typography  */
    /* Font Families */
    --font-primary: 'Nunito Sans', sans-serif;
    --font-secondary: 'Poppins', sans-serif;

    /* Font Sizes */
    --font-size-body: 1rem;
    --font-size-body-lg: 1.125rem;
    --font-size-display: 1.5rem;

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

    /* Line Heights */
    --line-height-display: 32px;
    --line-height-body: 24px;
    --line-height-p: 130%;

    /* Radius & shadows commonly used across DS */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);

    /* Aliases used by legacy/css-in-pages (keep for compatibility) */
    --gray-color-neutral-50: var(--color-neutral-50);
    --gray-color-neutral-100: var(--color-neutral-100);
    --gray-color-neutral-200: var(--color-neutral-200);
    --gray-color-neutral-300: var(--color-neutral-300);
    --gray-color-neutral-400: var(--color-neutral-400);
    --gray-color-neutral-500: var(--color-neutral-500);
    --gray-color-neutral-600: var(--color-neutral-600);
    --gray-color-neutral-700: var(--color-neutral-700);
    --gray-color-neutral-800: var(--color-neutral-800);
    --gray-color-neutral-900: var(--color-neutral-900);
    --gray-color-neutral-950: var(--color-neutral-950);

    --background-color-surface-app: var(--color-surface-app);

    --primary-color-brand-primary-300: var(--color-brand-primary-300);
    --primary-color-brand-primary-400: var(--color-brand-primary-400);
    --Primary-color-brand-primary-500: var(--color-brand-primary-500);

    --text-500: var(--color-neutral-500);
    --text-700: var(--color-neutral-700);

    /* Top-level semantic shortcuts used around the app */
    --color-primary: var(--color-brand-primary-500);
    --color-secondary: var(--color-accent-500);
    --color-body-text: var(--color-neutral-800);
    --color-body-text-light: var(--color-base-white);
    --success-50: #E9FBF2;
}