/* ============================================================
   PARADISA — CSS Custom Properties
   All design tokens in one place. Change here = change everywhere.
   ============================================================ */

:root {
    /* ── COLORS: Stone (Dark Theme) ── */
    --stone-bg:        #1a1a1a;
    --stone-bg2:       #222222;
    --stone-surface:   #2a2a2a;
    --stone-border:    #3a3a3a;
    --stone-hover:     #333333;

    /* ── COLORS: Gold Accent ── */
    --gold:            #c9a96e;
    --gold-light:      #d4bb8a;
    --gold-dim:        rgba(201, 169, 110, 0.12);
    --gold-glow:       rgba(201, 169, 110, 0.3);

    /* ── COLORS: Glass (Light Theme) ── */
    --glass-bg:        #ffffff;
    --glass-bg2:       #f5f7f9;
    --glass-accent:    #3a6b8c;
    --glass-accent-lt: #5a8bac;
    --glass-border:    #e0e0e0;

    /* ── COLORS: Ceramic (Warm Theme) ── */
    --ceramic-bg:      #f5f0e8;
    --ceramic-bg2:     #ebe4d6;
    --ceramic-accent:  #8a7050;
    --ceramic-accent-lt: #a08060;
    --ceramic-border:  #ddd5c5;

    /* ── COLORS: Text ── */
    --text-light:      #e8e4de;
    --text-muted-lt:   #999999;
    --text-dark:       #1a1a1a;
    --text-muted-dk:   #666666;

    /* ── COLORS: Semantic ── */
    --green:           #4a7c59;
    --red-soft:        #c45c5c;

    /* ── TYPOGRAPHY ── */
    --font-primary:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-weight-light:    300;
    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* ── FONT SIZES (fluid) ── */
    --fs-hero:         clamp(44px, 5.5vw, 72px);
    --fs-h1:           clamp(36px, 4.5vw, 56px);
    --fs-h2:           clamp(28px, 3.5vw, 42px);
    --fs-h3:           clamp(22px, 2.5vw, 30px);
    --fs-h4:           clamp(18px, 2vw, 22px);
    --fs-body:         15px;
    --fs-small:        13px;
    --fs-xs:           11px;
    --fs-overline:     11px;

    /* ── SPACING ── */
    --section-padding:    120px;
    --section-padding-sm: 80px;
    --container-max:      1200px;
    --container-wide:     1400px;
    --container-padding:  40px;
    --gap-lg:             60px;
    --gap-md:             24px;
    --gap-sm:             16px;

    /* ── BORDERS & RADIUS ── */
    --radius-sm:       4px;
    --radius-md:       8px;
    --radius-lg:       12px;
    --radius-pill:     24px;
    --radius-round:    50%;

    /* ── TRANSITIONS ── */
    --transition-fast:   0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow:   0.5s ease;

    /* ── SHADOWS ── */
    --shadow-card:     0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-card-hover: 0 20px 50px rgba(0, 0, 0, 0.3);
    --shadow-gold:     0 8px 24px rgba(201, 169, 110, 0.3);

    /* ── HEADER ── */
    --header-height:   64px;
    --header-bg:       rgba(26, 26, 26, 0.85);
    --header-blur:     16px;

    /* ── MATERIAL NAV ── */
    --matnav-height:   52px;
}

/* ── Responsive overrides ── */
@media (max-width: 1024px) {
    :root {
        --section-padding:    80px;
        --container-padding:  24px;
        --gap-lg:             40px;
    }
}

@media (max-width: 640px) {
    :root {
        --section-padding:    60px;
        --container-padding:  20px;
        --gap-lg:             30px;
        --header-height:      56px;
    }
}