/* ============================================================
   Sinar Beton Sentosa — Design Tokens (vars.css)
   Sumber tunggal untuk semua warna, font, dan spacing.
   ============================================================ */

:root {
  /* ── Brand Colors ─────────────────────────────────────── */
  --color-primary:      #F79A19;   /* Orange — aksen & highlight */
  --color-secondary:    #C1382E;   /* Merah  — navbar, CTA button */
  --color-dark:         #1A1818;   /* Hitam  — background footer */
  --color-white:        #FFFFFF;
  --color-black:        #000000;
  --color-text:         #222222;
  --color-text-light:   #666666;
  --color-text-muted:   rgba(255, 255, 255, 0.65);
  --color-card-bg:      #FFFFFF;
  --color-card-shadow:  rgba(0, 0, 0, 0.25);

  /* ── Typography ───────────────────────────────────────── */
  --font-family:   'Poppins', sans-serif;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* ── Font Sizes ───────────────────────────────────────── */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   36px;
  --text-4xl:   40px;
  --text-hero:  64px;

  /* ── Spacing ──────────────────────────────────────────── */
  --space-2xs:  4px;
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   40px;
  --space-xl:   64px;
  --space-2xl:  80px;

  /* ── Layout ───────────────────────────────────────────── */
  --max-width:        1400px;
  --navbar-width:     1420px;
  --header-height:    200px;    /* Tinggi total header (orange + red bar) */
  --navbar-height:    97px;     /* Tinggi red navbar bar */

  /* ── Elevation / Shadows ──────────────────────────────── */
  --shadow-card:  0px 4px 15px 0px rgba(0, 0, 0, 0.25);
  --shadow-nav:   0 4px 20px rgba(0, 0, 0, 0.18);
  --shadow-float: 0 6px 25px rgba(37, 211, 102, 0.45);

  /* ── Border Radius ────────────────────────────────────── */
  --radius-sm:    5px;
  --radius-md:    10px;
  --radius-lg:    30px;
  --radius-full:  9999px;

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:    0.15s ease;
  --transition-normal:  0.25s ease;
  --transition-slow:    0.4s ease;
}