/* ============================================================
   Design Tokens — Pale Palace · "Warm Luxury Palace"
   Cream halls, deep emerald rooms, gold details, arch frames.
   A royal home for Palestinian art.
   Breakpoints:
     xs  <576px  · sm 576px  · md 768px  · lg 992px
     xl  1200px  · xxl 1600px · xxxl 1920px+
   ============================================================ */

:root {
    /* ---- Palestinian Flag Core ---- */
    --pal-green:  #006233;
    --pal-red:    #CE1126;
    --pal-black:  #0D0D0D;
    --pal-white:  #FFFFFF;

    /* ---- Palace palette ---- */
    --color-cream:        #F6F1E6;
    --color-cream-deep:   #EFE8D8;
    --color-emerald:      #0E3B2E;
    --color-emerald-deep: #0A2C22;
    --color-gold:         #C2A05C;
    --color-gold-soft:    #D8C08C;
    --color-gold-dark:    #A5854A;

    --color-green:        #0E3B2E;
    --color-green-vivid:  #155743;
    --color-green-deep:   #0A2C22;
    --color-green-light:  #E9EFE7;
    --color-green-mid:    #C8D5C9;
    --color-red:          #A31220;
    --color-red-vivid:    #C0182A;
    --color-red-light:    #F6E6E4;

    /* ---- Semantic ---- */
    --color-bg:              #F6F1E6;   /* cream halls            */
    --color-bg-alt:          #EFE8D8;   /* deeper cream           */
    --color-bg-dark:         #0A2C22;   /* emerald rooms          */
    --color-surface:         #FFFDF7;   /* ivory mats / plaques   */
    --color-text:            #22201B;
    --color-text-muted:      #6B6353;
    --color-text-on-dark:    #F6F1E6;
    --color-text-on-dark-muted: #9FB0A5;
    --color-border:          #DFD5BE;
    --color-accent:          #0E3B2E;
    --color-accent-strong:   #C2A05C;
    --color-link:            #0E3B2E;
    --color-link-hover:      #C2A05C;
    --color-success:         #155743;
    --color-danger:          #A31220;

    /* Backward-compat aliases used in existing CSS rules */
    --color-museum-white:    #FFFDF7;
    --color-charcoal:        #22201B;
    --color-olive:           #0E3B2E;
    --color-terracotta:      #A31220;
    --color-warm-stone:      #DFD5BE;
    --color-historic-sand:   #EFE8D8;

    /* ---- Gold hairlines ---- */
    --gold-line:      1px solid rgba(194, 160, 92, 0.45);
    --gold-rule:      linear-gradient(90deg, transparent, #C2A05C, transparent);

    /* ---- Typography ---- */
    --font-heading: 'Marcellus', 'Times New Roman', Georgia, serif;
    --font-accent:  'Cormorant Garamond', Georgia, serif;
    --font-body:    'Jost', 'Segoe UI', system-ui, sans-serif;

    --fs-xs:   0.8rem;
    --fs-sm:   0.9rem;
    --fs-base: 1.02rem;
    --fs-lg:   1.18rem;
    --fs-xl:   clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem);
    --fs-2xl:  clamp(1.9rem, 1.5rem + 1.4vw, 3rem);
    --fs-3xl:  clamp(2.5rem, 1.9rem + 2.4vw, 4.4rem);
    --fs-hero: clamp(2.8rem, 1.9rem + 4.2vw, 6rem);

    --lh-tight: 1.1;
    --lh-base:  1.8;

    /* ---- Spacing ---- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-8:  3rem;
    --space-10: 4.5rem;
    --space-12: 6.5rem;
    --space-16: 8.5rem;

    /* ---- Layout ---- */
    --container-max:      1300px;
    --container-max-wide: 1700px;
    --container-pad:      clamp(1.25rem, 1rem + 1.5vw, 3rem);

    /* Soft classical corners; arches use the pill radius */
    --radius-sm:   2px;
    --radius-md:   4px;
    --radius-lg:   8px;
    --radius-pill: 999px;
    --radius-arch: 999px 999px 0 0;

    /* ---- Effects ---- */
    --shadow-sm:   0 2px 10px rgba(34, 32, 27, 0.07);
    --shadow-md:   0 16px 44px rgba(34, 32, 27, 0.13);
    --shadow-lg:   0 28px 70px rgba(34, 32, 27, 0.2);
    --shadow-red:  0 8px 26px rgba(163, 18, 32, 0.25);
    --shadow-card: 0 6px 22px rgba(34, 32, 27, 0.09);
    --shadow-gold: 0 12px 34px rgba(194, 160, 92, 0.35);

    --transition-base: 0.3s ease;
    --transition-slow: 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.35, 0.64, 1);

    /* ---- Z-index ---- */
    --z-nav:      100;
    --z-overlay:  200;
    --z-lightbox: 300;
    --z-toast:    400;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- 4K refinement ---- */
@media (min-width: 1920px) {
    :root {
        --container-max:      1500px;
        --container-max-wide: 2100px;
    }
}