/* =====================================================
   PT. HARAPAN MITRA ADV — Design Tokens
   CSS Custom Properties / Variables
   ===================================================== */

:root {
  /* ── Color Palette ── */
  --color-dark-base:       #020617;
  --color-dark-surface:    #0f172a;
  --color-dark-elevated:   #1a2332;
  --color-dark-border:     #1e293b;
  --color-dark-border-hover: #334155;
  
  --color-primary:         #2563eb;
  --color-primary-hover:   #1d4ed8;
  --color-primary-light:   #3b82f6;
  --color-primary-glow:    rgba(37, 99, 235, 0.4);
  --color-primary-subtle:  rgba(37, 99, 235, 0.1);
  
  --color-accent:          #10b981;
  --color-accent-hover:    #059669;
  --color-accent-glow:     rgba(16, 185, 129, 0.3);
  --color-accent-subtle:   rgba(16, 185, 129, 0.1);
  
  --color-white:           #ffffff;
  --color-text-primary:    #f1f5f9;
  --color-text-secondary:  #cbd5e1;
  --color-text-muted:      #94a3b8;
  --color-text-faint:      #64748b;
  --color-text-disabled:   #475569;

  /* ── Gradients ── */
  --gradient-hero:         linear-gradient(to top, var(--color-dark-base), rgba(2,6,23,0.9), rgba(2,6,23,0.7));
  --gradient-primary:      linear-gradient(135deg, var(--color-primary) 0%, #6366f1 100%);
  --gradient-accent:       linear-gradient(135deg, var(--color-accent) 0%, #06b6d4 100%);
  --gradient-surface:      linear-gradient(180deg, var(--color-dark-surface) 0%, var(--color-dark-base) 100%);
  --gradient-glass:        linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  --gradient-border:       linear-gradient(135deg, var(--color-primary), var(--color-accent));
  --gradient-radial-glow:  radial-gradient(circle at center, rgba(37,99,235,0.15) 0%, transparent 70%);

  /* ── Typography ── */
  --font-sans:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:            'Merriweather', Georgia, serif;
  
  --text-xs:               0.625rem;    /* 10px */
  --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 */
  --text-7xl:              4.5rem;      /* 72px */
  --text-8xl:              6rem;        /* 96px */
  
  --leading-tight:         1.1;
  --leading-snug:          1.3;
  --leading-normal:        1.5;
  --leading-relaxed:       1.625;
  
  --tracking-tighter:      -0.05em;
  --tracking-tight:        -0.025em;
  --tracking-normal:       0;
  --tracking-wide:         0.025em;
  --tracking-wider:        0.05em;
  --tracking-widest:       0.1em;
  --tracking-ultra:        0.2em;
  --tracking-mega:         0.3em;
  
  --weight-light:          300;
  --weight-normal:         400;
  --weight-medium:         500;
  --weight-bold:           700;
  --weight-black:          900;

  /* ── 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 */
  --space-24:              6rem;        /* 96px */
  --space-32:              8rem;        /* 128px */

  /* ── Layout ── */
  --max-width:             80rem;       /* 1280px */
  --max-width-narrow:      48rem;       /* 768px */
  --max-width-wide:        96rem;       /* 1536px */
  --container-padding:     1rem;

  /* ── Borders & Radius ── */
  --radius-none:           0;
  --radius-sm:             0.25rem;
  --radius-md:             0.5rem;
  --radius-lg:             0.75rem;
  --radius-xl:             1rem;
  --radius-full:           9999px;
  --border-width:          1px;
  --border-width-2:        2px;
  --border-width-4:        4px;

  /* ── Shadows ── */
  --shadow-sm:             0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:             0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg:             0 10px 15px -3px rgba(0, 0, 0, 0.4);
  --shadow-xl:             0 20px 25px -5px rgba(0, 0, 0, 0.4);
  --shadow-glow-primary:   0 0 20px var(--color-primary-glow);
  --shadow-glow-accent:    0 0 15px var(--color-accent-glow);
  --shadow-glass:          0 8px 32px rgba(0, 0, 0, 0.3);

  /* ── Transitions ── */
  --ease-default:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:               cubic-bezier(0.4, 0, 1, 1);
  --ease-out:              cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:           cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:         150ms;
  --duration-normal:       300ms;
  --duration-slow:         500ms;
  --duration-slower:       700ms;

  /* ── Z-Index Scale ── */
  --z-dropdown:            10;
  --z-sticky:              20;
  --z-fixed:               30;
  --z-overlay:             40;
  --z-modal:               50;
  --z-toast:               60;

  /* ── Glassmorphism ── */
  --glass-bg:              rgba(15, 23, 42, 0.8);
  --glass-bg-heavy:        rgba(2, 6, 23, 0.95);
  --glass-blur:            16px;
  --glass-blur-heavy:      24px;
  --glass-border:          rgba(255, 255, 255, 0.06);
}

/* ── Dark scrollbar ── */
:root {
  scrollbar-color: var(--color-dark-border) var(--color-dark-base);
  scrollbar-width: thin;
}