/* ============================================================
   Experior FM — CSS Custom Properties (Design Tokens)
   Single source of truth for colors, typography, spacing.
   ============================================================ */

:root {
    /* ── Brand Colors (extracted from official logo) ── */
    --color-primary:        #EC1970;   /* magenta-pink — logo X mark       */
    --color-primary-light:  #F0189A;   /* lighter pink — X mark highlight  */
    --color-primary-dark:   #C81460;   /* deep magenta — hover / active    */
    --color-primary-bg:     rgba(236, 25, 112, 0.08);

    --color-secondary:       #A0AC08;  /* bright olive — logo service bars */
    --color-secondary-light: #B8C420;  /* lighter olive — hover / tags     */
    --color-secondary-dark:  #6E5D0A;  /* dark olive-brown — bar gradient  */
    --color-secondary-bg:    rgba(160, 172, 8, 0.08);

    --color-accent:          #C89818;  /* warm gold — bar gradient accent   */

    /* ── Neutrals ── */
    --color-dark:       #1A1A1A;
    --color-body:       #444444;
    --color-muted:      #777777;
    --color-light:      #F5F5F5;
    --color-white:      #FFFFFF;
    --color-bg:         #FFFFFF;
    --color-bg-alt:     #F7F7F7;
    --color-border:     #E0E0E0;

    /* ── Semantic Colors ── */
    --color-success: #2E7D32;
    --color-warning: #F9A825;
    --color-error:   #C62828;

    /* ── Typography ── */
    --font-family:         'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-heading: 'Montserrat', 'Open Sans', sans-serif;
    --font-weight-light:    300;
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-extrabold:800;
    --font-weight-black:    900;

    /* ── Type Scale ── */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  2rem;       /* 32px */
    --text-4xl:  2.25rem;    /* 36px */
    --text-5xl:  3rem;       /* 48px */
    --text-6xl:  3.75rem;    /* 60px */

    --line-height-tight:  1.2;
    --line-height-normal: 1.6;
    --line-height-loose:  1.8;

    /* ── Spacing (8px base) ── */
    --space-xs:  0.5rem;     /* 8px  */
    --space-sm:  1rem;       /* 16px */
    --space-md:  1.5rem;     /* 24px */
    --space-lg:  2rem;       /* 32px */
    --space-xl:  3rem;       /* 48px */
    --space-2xl: 4rem;       /* 64px */
    --space-3xl: 6rem;       /* 96px */

    /* ── Layout ── */
    --container-max:   1200px;
    --container-narrow: 800px;
    --header-height:   80px;

    /* ── Borders & Radius ── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg:  0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl:  0 12px 40px rgba(0, 0, 0, 0.15);

    /* ── Transitions ── */
    --transition-fast:   150ms ease;
    --transition-base:   300ms ease;
    --transition-slow:   500ms ease;

    /* ── Z-Index Scale ── */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
}
