/*
 * Design tokens — sumber kebenaran visual.
 * Nama variabel = nama Global Color / Global Font di Elementor Site Settings.
 * Struktur halaman mengikuti sgcka.co.id; tampilan modern-bersih dengan warna dari logo Adonai.
 * Detail & kontras: CLAUDE.md §5.
 */

:root {
  /* Global Colors */
  --color-primary: #0B4A80;        /* Brand Navy: tombol utama, judul, band gelap */
  --color-primary-deep: #0A2540;   /* Navy gelap: footer, ujung gradien band */
  --color-secondary: #0072BC;      /* Biru logo: link, ikon */
  --color-accent: #F88A00;         /* Oranye logo: garis aktif, ikon, dekorasi. Bukan teks di atas putih */
  --color-accent-strong: #A65800;  /* Oranye gelap untuk teks kecil (eyebrow): 5.23:1 di putih */
  --color-text: #0F1B2D;
  --color-text-muted: #556275;
  --color-surface: #F5F8FB;        /* Latar section selang-seling */
  --color-border: #E3EAF2;
  --color-white: #FFFFFF;
  --color-whatsapp: #25D366;       /* Hanya tombol WA */
  --color-on-dark-muted: #BFD0E3;  /* Teks sekunder di atas navy (5.79:1 di Primary) */
  --color-tint: rgba(11, 74, 128, .08);   /* Lingkaran ikon lembut */
  --color-accent-tint: rgba(248, 138, 0, .16);
  --color-highlight: #F2F7A0;      /* Penanda [TODO], khusus mockup */
  --color-placeholder: #E9EEF4;    /* Kotak placeholder [TODO] */
  --color-overlay: rgba(10, 37, 64, .88);

  --gradient-dark: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);
  --gradient-hero: linear-gradient(90deg, rgba(10, 37, 64, .92) 0%, rgba(10, 37, 64, .72) 45%, rgba(10, 37, 64, 0) 80%);
  /* Overlay hero di mobile: navy dari bawah (teks di bawah, foto tetap terlihat di atas) */
  --gradient-hero-mobile: linear-gradient(0deg, rgba(10, 37, 64, .96) 0%, rgba(10, 37, 64, .88) 55%, rgba(10, 37, 64, 0) 82%);

  /* Global Fonts */
  --font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --h1-size: 44px;  --h1-weight: 700; --h1-lh: 1.2;
  --h2-size: 32px;  --h2-weight: 700; --h2-lh: 1.25;
  --h3-size: 20px;  --h3-weight: 600; --h3-lh: 1.35;
  --h4-size: 16px;  --h4-weight: 600; --h4-lh: 1.4;
  --body-size: 16px; --body-weight: 400; --body-lh: 1.7;
  --small-size: 14px; --small-weight: 400; --small-lh: 1.6;
  --button-size: 15px; --button-weight: 600;
  --eyebrow-size: 13px; --eyebrow-weight: 600; --eyebrow-tracking: .1em;
  --menu-size: 15px; --menu-weight: 500;

  /* Layout — Astra Container Layout "Full Width / Stretched", Elementor Content Width 1200 */
  --content-width: 1200px;
  --gutter: 24px;
  --article-width: 760px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-section: 88px;

  /* Radius */
  --radius-card: 16px;
  --radius-image: 12px;
  --radius-button: 10px;
  --radius-pill: 999px;

  /* Bayangan */
  --shadow-card: 0 8px 24px rgba(10, 37, 64, .08);
  --shadow-card-hover: 0 14px 36px rgba(10, 37, 64, .14);
  --shadow-soft: 0 2px 12px rgba(10, 37, 64, .08);
}

/* Elementor breakpoint: Tablet ≤1024 */
@media (max-width: 1024px) {
  :root {
    --h1-size: 36px;
    --h2-size: 28px;
    --space-section: 72px;
  }
}

/* Elementor breakpoint: Mobile ≤767 */
@media (max-width: 767px) {
  :root {
    --h1-size: 28px;
    --h2-size: 24px;
    --small-size: 14px;
    --gutter: 16px;
    --space-section: 48px;
  }
}