/* ==========================================================================
   DESIGN TOKENS & SYSTEM ROOT
   ========================================================================== */
:root {
    /* Primary */
    --color-primary: #4338CA;
    --color-primary-dark: #3128A0;
    --color-primary-soft: #5B4FE3;

    /* Secondary */
    --color-secondary: #6366F1;
    --color-secondary-dark: #4F46E5;
    --color-secondary-light: #A5B4FC;

    /* Accent */
    --color-accent: #F97316;
    --color-accent-dark: #EA580C;
    --color-accent-light: #FED7AA;

    /* Text */
    --color-text: #1E293B;
    --color-text-soft: #475569;
    --color-text-light: #94A3B8;

    /* Neutral */
    --color-white: #FFFFFF;
    --color-surface: #F8FAFC;
    --color-surface-soft: #EEF2FF;
    --color-border: #E2E8F0;

    /* Gradient */
    --color-gradient: linear-gradient(
        135deg,
        #3128A0 0%,
        #4338CA 45%,
        #6366F1 100%
    );

    /* Accent Gradient (opsional) */
    --color-gradient-accent: linear-gradient(
        135deg,
        #F97316 0%,
        #FB923C 100%
    );

    /* Overlay */
    --color-overlay: linear-gradient(
        to bottom,
        rgba(15, 23, 42, 0.35),
        rgba(15, 23, 42, 0.75)
    );
    
    --font-main: 'General Sans', sans-serif;
    --font-header: 'Clash Display', sans-serif;

    /* Typography Scale */
    --fs-display: clamp(3rem, 5vw, 4.5rem);
    --fs-h1: clamp(2.25rem, 4vw, 3rem);
    --fs-h2: clamp(1.75rem, 3vw, 2.25rem);
    --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
    --fs-h4: clamp(1.125rem, 1.5vw, 1.25rem);
    --fs-lead: 1.125rem;
    --fs-body: 1rem;
    --fs-small: .875rem;
    --lh-tight: 1.2;
    --lh-normal: 1.7;

    /* Premium Shadow Layering */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-premium: 0 10px 30px -10px rgba(15, 23, 42, 0.3);
    --shadow-premium-hover: 0 20px 40px -15px rgba(15, 23, 42, 0.45);
    
    /* Shimmer Effect Variables */
    --btn-shine-bg: rgba(255, 255, 255, 0.25);
    --btn-shine-bg-dark: rgba(15, 23, 42, 0.1);

    /* Smooth Transitions */
    --transition-premium: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-fast: all 0.15s ease;

    /* Layout Spacing */
    --gutter: 24px;
    --space-xs: 4px;
    --space-sm: 12px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 80px;

    --container-sm: 768px;
    --container-md: 1024px;
    --container-lg: 1280px;
    --container-xl: 1440px;
    --container-xxl: 1600px;

    /* Corner Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

      /* ==========================
     DURATION
  ========================== */

  --motion-fast: .25s;
  --motion-normal: .45s;
  --motion-slow: .75s;
  --motion-cinematic: 1s;

  /* ==========================
     DELAY
  ========================== */

  --motion-delay-xs: .03s;
  --motion-delay-sm: .06s;
  --motion-delay-md: .1s;

  /* ==========================
     EASING
     (lebih halus daripada ease)
  ========================== */

  --ease-smooth: cubic-bezier(.25,.46,.45,.94);

  /* seperti Apple */
  --ease-cinematic: cubic-bezier(.22,1,.36,1);

  /* terasa sedikit "mengambang" */
  --ease-floating: cubic-bezier(.16,1,.3,1);

  /* untuk elemen premium */
  --ease-luxury: cubic-bezier(.19,1,.22,1);

  /* ==========================
     TRANSFORM
  ========================== */

  --hover-scale: 1.03;
  --hover-lift: -6px;
  --hover-rotate: .5deg;

  /* ==========================
     BLUR
  ========================== */

  --blur-soft: 2px;
  --blur-medium: 4px;
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    background-color: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
    scroll-behavior: smooth;
}

a { 
    text-decoration: none; 
    color: inherit; 
    transition: var(--transition-fast); 
}

ul { 
    list-style: none !important; 
}

button { 
    cursor: pointer; 
    border: none; 
    font-family: inherit; 
}

/* ==========================================================================
   TYPOGRAPHY SYSTEM
   ========================================================================== */
.display-lg { font-family: var(--font-header); font-size: var(--fs-display)!important; line-height: var(--lh-tight); font-weight: 800; color: var(--color-primary); }
.headline-lg { font-family: var(--font-header); font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 700; color: var(--color-primary); }
.headline-md { font-family: var(--font-header); font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: 600; }
.headline-sm { font-family: var(--font-header); font-size: var(--fs-h3); line-height: var(--lh-tight); font-weight: 600; }
.body-lg { font-family: var(--font-main); font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--color-text-soft); }
.body-md { font-family: var(--font-main); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text-soft); }
.body-sm { font-family: var(--font-main); font-size: var(--fs-small); line-height: var(--lh-tight); color: var(--color-text-soft); }
.label-md { font-family: var(--font-main); font-size: var(--fs-small); line-height: var(--lh-tight); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

/* Margin Utilities */
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
.section-padding { padding: var(--space-xl) 0; }
.flex { display: flex; }
.grid { display: grid; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }