/*
 * ============================================================
 *  AgentSeeker Design Tokens
 *  Single source of truth for all brand values.
 *  Every page and component must reference these variables.
 * ============================================================
 */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500&display=swap');

:root {

    /* ============================================================
     *  COLOUR PALETTE
     * ============================================================ */

    /* Primary — Champagne Gold */
    --primary:            #C3A05F;
    --primary-dark:       #8A7040;
    --primary-light:      rgba(195, 158, 95, 0.18);

    /* Secondary — Steel Sky */
    --secondary:          #A0BAD2;

    /* Accent Dark — Near Black */
    --accent-dark:        #1A1F1C;

    /* Text */
    --text:               #2E3530;
    --text-light:         #8A9890;

    /* Backgrounds */
    --background:         #F5F3F0;
    --white:              #FFFFFF;

    /* Status */
    --success:            #7A9088;
    --warning:            #E2CAA8;
    --error:              #A05028;

    /* EPC Rating Scale */
    --epc-a:              #00a651;
    --epc-b:              #50b848;
    --epc-c:              #aed136;
    --epc-d:              #fff200;
    --epc-e:              #f7941d;
    --epc-f:              #ed1c24;
    --epc-g:              #9e1f63;


    /* ============================================================
     *  HERO GRADIENT  (brand backbone — required behind all glass)
     * ============================================================ */

    --gradient-hero:      linear-gradient(125deg, #E8D4B4 0%, #DDD0E0 30%, #BEC8DC 60%, #A0BAD2 100%);
    --gradient-lavender:  linear-gradient(135deg, #F0EDEA, #D0C8D8);
    --gradient-midnight:  linear-gradient(135deg, #1A1F1C, #2E3530, #3D5268);
    --gradient-amber:     linear-gradient(135deg, #E2CAA8, #C3A05F);


    /* ============================================================
     *  GLASS SURFACE SYSTEM
     *  Rule: opacity ≤ 0.50 — above this it stops reading as glass
     *  Rule: always include saturate(1.6+) — without it blur looks milky
     *  Rule: glass only works over the gradient background
     * ============================================================ */

    /* Surface colours (use with backdrop-filter) */
    --glass-card:         rgba(255, 255, 255, 0.18);
    --glass-primary:      rgba(195, 158, 95, 0.35);
    --glass-ghost:        rgba(255, 255, 255, 0.18);
    --glass-steel:        rgba(100, 140, 175, 0.20);
    --glass-dark:         rgba(26, 31, 28, 0.42);

    /* Shared glass effects */
    --glass-blur:         blur(26px) saturate(1.6);
    --glass-blur-btn:     blur(22px) saturate(1.8);

    /* Specular highlights — applied to ALL glass elements */
    --glass-specular:     rgba(255, 255, 255, 0.95);
    --glass-sheen-start:  rgba(255, 255, 255, 0.22);
    --glass-sheen-end:    rgba(255, 255, 255, 0.04);


    /* ============================================================
     *  TYPOGRAPHY
     *  Headings: Playfair Display (italic for 1–2 emphasis words)
     *  Body:     Outfit (300 body, 400 default, 500 labels/buttons)
     *  Never use Inter, Roboto, Arial, or system-ui.
     * ============================================================ */

    --font-heading:       'Meshed Display', 'Playfair Display', Georgia, serif;
    --font-body:          'Outfit', sans-serif;

    --font-weight-light:  300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;

    /* Type scale */
    --text-xs:            0.625rem;   /* 10px — btn sm */
    --text-sm:            0.6875rem;  /* 11px — btn md */
    --text-base:          0.8125rem;  /* 13px — btn lg / body small */
    --text-md:            0.9375rem;  /* 15px — body */
    --text-lg:            1.125rem;   /* 18px */
    --text-xl:            1.25rem;    /* 20px */
    --text-2xl:           1.5rem;     /* 24px */
    --text-3xl:           2rem;       /* 32px */
    --text-4xl:           2.5rem;     /* 40px */
    --text-5xl:           3rem;       /* 48px */

    --line-height-tight:  1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;


    /* ============================================================
     *  SPACING
     * ============================================================ */

    --space-1:   0.25rem;   /*  4px */
    --space-2:   0.5rem;    /*  8px */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */


    /* ============================================================
     *  SHAPE — fully rounded system, no sharp edges
     * ============================================================ */

    --radius-sm:   14px;    /* badges, small elements */
    --radius-md:   18px;    /* inputs, small cards */
    --radius-lg:   22px;    /* cards */
    --radius-xl:   28px;    /* large cards, modals */
    --radius-pill: 50px;    /* all buttons */
    --radius-full: 9999px;  /* circles */


    /* ============================================================
     *  SHADOWS — subtle and warm, max alpha 0.25 on light surfaces
     * ============================================================ */

    --shadow-sm:    0 2px 12px rgba(26, 31, 28, 0.04);
    --shadow:       0 8px 40px rgba(26, 31, 28, 0.07);
    --shadow-lg:    0 12px 48px rgba(26, 31, 28, 0.10);
    --shadow-gold:  0 6px 28px rgba(185, 145, 75, 0.25);
    --shadow-dark:  0 4px 24px rgba(0, 0, 0, 0.18);


    /* ============================================================
     *  TRANSITIONS — refined and calm, never bouncy
     * ============================================================ */

    --ease-out:     cubic-bezier(0.34, 1.2, 0.64, 1);   /* button hover — slight spring */
    --ease-smooth:  ease-in-out;                          /* cards, general transitions */

    --transition-fast:  0.15s var(--ease-smooth);
    --transition:       0.3s var(--ease-smooth);
    --transition-slow:  0.5s var(--ease-smooth);
    --transition-btn:   0.3s var(--ease-out);


    /* ============================================================
     *  Z-INDEX LAYERS
     * ============================================================ */

    --z-behind:   -1;
    --z-base:      0;
    --z-above:     10;
    --z-nav:       100;
    --z-overlay:   1000;
    --z-modal:     2000;
    --z-top:       9999;


    /* ============================================================
     *  BUTTON SIZING
     *  All buttons: uppercase, letter-spacing 0.08em, pill radius
     * ============================================================ */

    --btn-letter-spacing: 0.08em;

    /* Large */
    --btn-lg-padding:   12px 28px;
    --btn-lg-font:      var(--text-base);    /* 13px */

    /* Medium */
    --btn-md-padding:   9px 22px;
    --btn-md-font:      var(--text-sm);      /* 11px */

    /* Small */
    --btn-sm-padding:   6px 15px;
    --btn-sm-font:      var(--text-xs);      /* 10px */
}


/* ============================================================
 *  FLOATING ORB ANIMATIONS
 *  Decorative glass orbs for gradient backdrop depth
 * ============================================================ */

@keyframes floatA {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%      { transform: translateY(-20px) translateX(10px); }
}

@keyframes floatB {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%      { transform: translateY(15px) translateX(-12px); }
}

@keyframes floatC {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%      { transform: translateY(-10px) translateX(-8px); }
}