/* Logiscale — Design Tokens v2.0
   Digital Growth Ecosystem · Navy #0D1F3D + Orange #FF7A00
   Rasio pakai: 60 netral / 30 navy / 10 orange
   PERINGATAN KONTRAS: --ls-accent (#FF7A00) TIDAK lolos WCAG AA untuk teks
   di atas putih (2.6:1). Untuk teks oranye pakai --ls-accent-text (#BD5A00, 4.5:1).
   Untuk teks di atas tombol oranye pakai --ls-primary (6.3:1), bukan putih. */

:root{
  /* ── Palet mentah ───────────────────────────── */
  --ls-navy-950: #050D1A;
  --ls-navy-900: #0D1F3D;
  --ls-navy-800: #16305C;
  --ls-navy-700: #1F447D;
  --ls-navy-600: #2C5C9E;
  --ls-navy-400: #6D93C4;
  --ls-navy-300: #9FBBDC;
  --ls-navy-100: #DCE6F2;
  --ls-navy-50: #F2F6FB;
  --ls-orange-800: #A34A00;
  --ls-orange-700: #BD5A00;
  --ls-orange-600: #E66E00;
  --ls-orange-500: #FF7A00;
  --ls-orange-400: #FF9838;
  --ls-orange-300: #FFB877;
  --ls-orange-100: #FFE7D1;
  --ls-orange-50: #FFF5EC;
  --ls-neutral-charcoal: #333333;
  --ls-neutral-gray: #666666;
  --ls-neutral-grayLight: #9AA3AF;
  --ls-neutral-line: #E3E7EE;
  --ls-neutral-surface: #F2F4F7;
  --ls-neutral-white: #FFFFFF;

  /* ── Token semantik (pakai ini di kode) ─────── */
  --ls-primary: #0D1F3D; /* Warna utama merek — header, judul, latar gelap */
  --ls-primary-deep: #050D1A; /* Latar paling gelap, footer, overlay */
  --ls-primary-hover: #16305C; /* State hover tombol primary */
  --ls-primary-soft: #DCE6F2; /* Latar kartu bernuansa merek */
  --ls-primary-tint: #F2F6FB; /* Latar section paling lembut */
  --ls-accent: #FF7A00; /* Aksen — CTA, highlight, ikon aktif. Maks ±10% area */
  --ls-accent-hover: #E66E00; /* State hover aksen */
  --ls-accent-text: #BD5A00; /* Satu-satunya oranye yang lolos AA untuk teks di putih */
  --ls-accent-on-dark: #FF9838; /* Aksen di atas latar navy (kontras 7.6:1) */
  --ls-accent-soft: #FFE7D1; /* Latar badge / pill aksen */
  --ls-accent-tint: #FFF5EC; /* Latar section aksen paling lembut */
  --ls-text: #333333; /* Body text */
  --ls-text-strong: #0D1F3D; /* Heading */
  --ls-text-muted: #666666; /* Caption, label sekunder */
  --ls-border: #E3E7EE; /* Garis, divider, outline kartu */
  --ls-surface: #F2F4F7; /* Latar section abu lembut */
  --ls-bg: #FFFFFF; /* Latar dasar */

  /* ── Gradient ───────────────────────────────── */
  --ls-gradient-brand: linear-gradient(90deg, #0D1F3D 0%, #FF7A00 100%);
  --ls-gradient-brand-diag: linear-gradient(135deg, #0D1F3D 0%, #1F447D 45%, #FF7A00 100%);
  --ls-gradient-depth: linear-gradient(180deg, #0D1F3D 0%, #050D1A 100%);

  /* ── Tipografi ──────────────────────────────── */
  --ls-font-display: 'Poppins', system-ui, sans-serif;
  --ls-font-body: 'Inter', system-ui, sans-serif;
  --ls-text-display: clamp(2.5rem, 5vw, 4rem);
  --ls-text-h1: clamp(2rem, 3.6vw, 3rem);
  --ls-text-h2: clamp(1.6rem, 2.6vw, 2.125rem);
  --ls-text-h3: 1.375rem;
  --ls-text-body: 1.0625rem;
  --ls-text-small: 0.9375rem;
  --ls-text-caption: 0.8125rem;
  --ls-lh-tight: 1.15;
  --ls-lh-heading: 1.25;
  --ls-lh-body: 1.6;
  --ls-track-display: -0.02em;
  --ls-track-heading: -0.01em;
  --ls-track-body: 0;
  --ls-track-caps: 0.14em;

  /* ── Spasi, radius, shadow ──────────────────── */
  --ls-space-1: 4px;
  --ls-space-2: 8px;
  --ls-space-3: 12px;
  --ls-space-4: 16px;
  --ls-space-5: 24px;
  --ls-space-6: 32px;
  --ls-space-7: 48px;
  --ls-space-8: 64px;
  --ls-space-9: 96px;
  --ls-space-10: 128px;
  --ls-radius-sm: 8px;
  --ls-radius-md: 12px;
  --ls-radius-lg: 20px;
  --ls-radius-xl: 28px;
  --ls-radius-pill: 999px;
  --ls-radius-app: 22.5%;
  --ls-shadow-sm: 0 1px 2px rgba(13,31,61,.08);
  --ls-shadow-md: 0 8px 24px rgba(13,31,61,.10);
  --ls-shadow-lg: 0 20px 56px rgba(13,31,61,.16);
  --ls-shadow-accent: 0 8px 24px rgba(255,122,0,.28);
}