/* ============================================================
   PAGADIAN TOURISM DESIGN SYSTEM — CSS CUSTOM PROPERTIES
   Premium Government-Tech Visual Language
   ============================================================ */

:root {
    /* ── Brand Colors — Dark Orange + Lavender Violet Shading ── */
    --color-ocean:        #D54215;
    --color-ocean-dark:   #9A2E0E;
    --color-ocean-light:  #FB923C;
    --color-ocean-pale:   #FFF1E6;

    --color-green:        #2D6A4F;
    --color-green-dark:   #1B4332;
    --color-green-light:  #52B788;
    --color-green-pale:   #D8F3DC;

    --color-teal:         #EA580C;
    --color-teal-light:   #FB923C;

    --color-gold:         #FBBF24;
    --color-gold-dark:    #D97706;
    --color-gold-pale:    #FFF8E1;

    --color-coral:        #DC2626;
    --color-coral-dark:   #991B1B;
    --color-coral-pale:   #FEE2E2;

    --color-purple:       #7C3AED;
    --color-lavender:     #A78BFA;
    --color-lavender-light:#C4B5FD;
    --color-lavender-pale: #EDE9FE;
    --color-violet-dark:  #5B21B6;

    /* ── Neutral Palette ── */
    --color-white:        #FFFFFF;
    --color-gray-50:      #F8F9FA;
    --color-gray-100:     #F1F3F5;
    --color-gray-200:     #E9ECEF;
    --color-gray-300:     #DEE2E6;
    --color-gray-400:     #CED4DA;
    --color-gray-500:     #ADB5BD;
    --color-gray-600:     #6C757D;
    --color-gray-700:     #495057;
    --color-gray-800:     #343A40;
    --color-gray-900:     #212529;
    --color-black:        #0D1117;

    /* ── Semantic Colors ── */
    --color-primary:      var(--color-ocean);
    --color-primary-dark: var(--color-ocean-dark);
    --color-primary-light:var(--color-ocean-pale);
    --color-secondary:    var(--color-green);
    --color-accent:       var(--color-gold);

    --color-success:      #198754;
    --color-success-bg:   #D1E7DD;
    --color-warning:      #FFC107;
    --color-warning-bg:   #FFF3CD;
    --color-danger:       #DC3545;
    --color-danger-bg:    #F8D7DA;
    --color-info:         #0DCAF0;
    --color-info-bg:      #CFF4FC;

    /* ── Typography ── */
    --font-family:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading:       'Plus Jakarta Sans', var(--font-family);
    --font-mono:          'JetBrains Mono', 'Fira Code', monospace;

    --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:           1.875rem;    /* 30px */
    --text-4xl:           2.25rem;     /* 36px */
    --text-5xl:           3rem;        /* 48px */
    --text-6xl:           3.75rem;     /* 60px */

    --leading-tight:      1.25;
    --leading-snug:       1.375;
    --leading-normal:     1.5;
    --leading-relaxed:    1.625;

    --weight-regular:     400;
    --weight-medium:      500;
    --weight-semibold:    600;
    --weight-bold:        700;
    --weight-extrabold:   800;

    /* ── Spacing Scale ── */
    --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 */
    --space-24:  6rem;      /* 96px */

    /* ── Border Radius ── */
    --radius-sm:   0.375rem;  /* 6px */
    --radius-md:   0.5rem;    /* 8px */
    --radius-lg:   0.75rem;   /* 12px */
    --radius-xl:   1rem;      /* 16px */
    --radius-2xl:  1.5rem;    /* 24px */
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    --shadow-glow: 0 0 20px rgba(213,66,21,0.15);

    /* ── Motion Tokens ── */
    --motion-fast:     120ms;
    --motion-ui:       180ms;
    --motion-medium:   240ms;
    --motion-slow:     320ms;
    --motion-slower:   500ms;

    --ease-standard:   cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --ease-exit:       cubic-bezier(0.4, 0, 1, 1);
    --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ── */
    --container-sm:    640px;
    --container-md:    768px;
    --container-lg:    1024px;
    --container-xl:    1200px;
    --container-2xl:   1400px;

    --sidebar-width:   280px;
    --header-height:   72px;
    --admin-sidebar:   260px;

    /* ── Z-Index Scale ── */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-fixed:     300;
    --z-overlay:   400;
    --z-modal:     500;
    --z-toast:     600;
    --z-tooltip:   700;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast:   0ms;
        --motion-ui:     0ms;
        --motion-medium: 0ms;
        --motion-slow:   0ms;
        --motion-slower: 0ms;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}