/*
 * PropFirmMap Design Tokens
 * CSS Custom Properties for consistent theming across the site.
 *
 * Usage: Replace hardcoded values with var(--token-name) in component CSS files.
 * This file must be loaded before all other stylesheets.
 */

:root {
    /* ── Brand Colors ── */
    --color-primary:        #7A95F8;
    --color-primary-dark:   #6453CA;
    --color-primary-alt:    #7489e1;   /* pagination, radio labels */
    --color-success:        #41b618;

    /* ── Brand Gradients ── */
    --gradient-brand:       linear-gradient(to bottom, #7A95F8 8%, #6453CA 92%);
    --gradient-brand-h:     linear-gradient(to right, #7A95F8 8%, #6453CA 92%);
    --gradient-brand-diag:  linear-gradient(100deg, #7A95F8 0%, #6453CA 100%);

    /* ── Surfaces ── */
    --color-surface-warm:   #FBF5F3;   /* card/tab backgrounds */
    --color-surface-gray:   #DFDFDF;   /* secondary panels, date badges */
    --color-surface-input:  #E7E7E7;   /* textarea, confirmation inputs */
    --color-surface-search: #f8f9fa;   /* search box bg */
    --color-surface-rating: #D9D9D9;   /* rating bar track */

    /* ── Text Colors ── */
    --color-text-primary:   #000000;
    --color-text-dark:      #5B5B5B;
    --color-text-mid:       #626262;
    --color-text-gray:      #828282;   /* placeholders, star labels */
    --color-text-muted:     #909090;   /* descriptions, about text */
    --color-text-subtle:    #8E8888;   /* section titles, date badges */
    --color-text-light:     #747474;   /* struck-through prices */
    --color-text-table:     #6F6F6F;   /* table headers */
    --color-text-section:   #898989;   /* compare section titles */
    --color-text-link:      #757575;   /* light descriptions */

    /* ── Border Colors ── */
    --color-border-light:   #dfdede;   /* table row borders */
    --color-border-mid:     #878787;   /* divider lines */
    --color-border-footer:  #7d8aba;   /* footer link underline */

    /* ── Typography ── */
    --font-family-base:     'Metropolis', sans-serif;

    /* ── Border Radius ── */
    --radius-sm:            5px;
    --radius-md:            8px;
    --radius-lg:            12px;
    --radius-xl:            20px;
    --radius-pill:          24px;
    --radius-round:         50px;
}