/* ============================================================
   Medan Jaya Electrical — Design Tokens
   Per official brand guideline: Royal Blue + Electric Yellow.
   Reused across site, social, GBP, and stationery — treat as
   the source of truth, not per-page.
   ============================================================ */

:root {
  /* Color — navy/blue scale (primary) */
  --navy-950: #08192e; /* Deep Navy */
  --navy-900: #0d2b56; /* Royal Blue */
  --navy-800: #15376b;
  --navy-700: #1f478a;
  --navy-600: #2f5aa8;
  --navy-500: #4570c0;
  --navy-100: #dbe6f5;
  --navy-50:  #eef3fb;

  /* Color — yellow scale (accent, never body text on light bg) */
  --gold-700: #a67c00;
  --gold-600: #d19a00;
  --gold-500: #ffc107; /* Electric Yellow */
  --gold-400: #ffcd3c;
  --gold-300: #ffdb70;
  --gold-100: #fff3d1;
  --gold-50:  #fffaeb;

  /* Neutrals */
  --white: #f8fafc; /* Clean White */
  --ink: #16202e;
  --ink-soft: #4a5568;
  --steel: #64748b; /* Steel Gray */
  --gray-200: #e4e8ee;
  --gray-100: #f4f6f9;
  --paper: #faf9f6;

  /* Semantic */
  --color-bg: var(--white);
  --color-bg-alt: var(--paper);
  --color-bg-dark: var(--navy-900);
  --color-text: var(--ink);
  --color-text-soft: var(--ink-soft);
  --color-text-on-dark: var(--white);
  --color-accent: var(--gold-500);
  --color-accent-strong: var(--gold-600);
  --color-border: var(--gray-200);
  --color-focus: var(--gold-600);

  /* Typography */
  --font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-script: "Dancing Script", cursive;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 2.875rem;
  --fs-4xl: 3.5rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --container-max: 1200px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(13, 43, 86, 0.08);
  --shadow-md: 0 8px 24px rgba(13, 43, 86, 0.10);
  --shadow-lg: 0 20px 48px rgba(13, 43, 86, 0.16);
  --shadow-gold: 0 10px 30px rgba(255, 193, 7, 0.30);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}