/**
 * ============================================================================
 * DESIGN TOKENS — FIKI ARDIANSYAH PERSONAL BRAND
 * ============================================================================
 * Tema: Modern Metallic Dark (Charcoal/Obsidian) dengan Presisi Aksen Merah Metalik
 * Standar: Zero Dominant Blue (Saturasi netral < 6%), Fluid Typography via clamp()
 */

:root {
  /* ==========================================================================
     1. Palet Warna Latar & Permukaan Metalik (Obsidian / Titanium Charcoal)
     Saturasi rona netral dijaga < 6% untuk mengeliminasi warna biru dingin (anti-slate)
     ========================================================================== */
  --bg-primary: #0a0b0e;          /* Latar belakang kanvas utama (Obsidian Charcoal) */
  --bg-secondary: #101217;        /* Latar section selang-seling */
  --surface-card: #151820;        /* Permukaan kartu metalik brushed titanium */
  --surface-card-hover: #1c202a;  /* State hover permukaan kartu */
  --surface-elevated: #222733;    /* Panel mengambang, dropdown, mobile drawer */
  --surface-input: #0d0f13;       /* Bidang input form */
  --surface-backdrop: rgba(10, 11, 14, 0.85); /* Overlay glassmorphism navbar */

  /* ==========================================================================
     2. Metallic Borders & Hairline Gradients
     ========================================================================== */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.16);
  --border-highlight: rgba(255, 255, 255, 0.28);
  --border-metallic: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0.14) 100%
  );
  --border-metallic-active: linear-gradient(
    135deg,
    rgba(230, 46, 61, 0.7) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(230, 46, 61, 0.4) 100%
  );

  /* ==========================================================================
     3. Precision Metallic Red Accent System (Aksen Tunggal Utama)
     ========================================================================== */
  --red-primary: #e62e3d;         /* Merah metalik presisi inti */
  --red-hover: #ff3b4b;           /* Merah terang saat interaksi aktif/hover */
  --red-dark: #a81c27;            /* Merah gelap untuk bayangan batas */
  --red-glow: rgba(230, 46, 61, 0.28); /* Pendar cahaya laser metalik halus */
  --red-glow-strong: rgba(230, 46, 61, 0.55); /* Pendar cahaya laser fokus */
  --red-badge-bg: rgba(230, 46, 61, 0.09);    /* Latar badge keahlian/tag */
  --red-badge-border: rgba(230, 46, 61, 0.32);/* Batas badge metalik */

  --gradient-red-metallic: linear-gradient(
    135deg,
    #ff3a4a 0%,
    #d81e2d 50%,
    #94101b 100%
  );
  --gradient-metallic-sheen: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0) 100%
  );

  /* ==========================================================================
     4. Tipografi & Kontras Teks (WCAG 2.1 AA Compliant)
     ========================================================================== */
  --text-primary: #f5f6f8;        /* Titanium white (rasio kontras > 14:1 terhadap latar) */
  --text-secondary: #9da3b0;      /* Platinum grey untuk paragraf (rasio kontras > 5.5:1) */
  --text-muted: #676e7d;          /* Neutral steel untuk metadata teknis (rasio kontras > 3.5:1) */
  --text-accent: #ff4756;         /* Aksen merah cerah untuk kata kunci teknologi */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;

  /* Fluid Typography Scale via clamp() */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.375rem);
  --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
  --text-hero: clamp(2.5rem, 2rem + 2.5vw, 4.25rem);

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  /* Line Heights */
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* ==========================================================================
     5. Elevasi & Bayangan Metalik
     ========================================================================== */
  --shadow-metallic: 0 4px 20px -2px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-card-hover: 0 16px 36px -6px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --shadow-red-glow: 0 0 24px -2px rgba(230, 46, 61, 0.42);
  --shadow-red-button: 0 4px 18px rgba(230, 46, 61, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Transisi */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Spacing Grid */
  --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 */

  /* Layout Constraints */
  --max-width-content: 1200px;
  --max-width-wide: 1360px;
  --navbar-height: 72px;

  /* Z-Index Hierarchy */
  --z-canvas: 0;
  --z-content: 10;
  --z-navbar: 100;
  --z-drawer: 200;
  --z-toast: 300;
}