/* ==========================================================================
   PT. CLOUDS MATEKA TARAKANITA — Design Tokens
   Direction: "Archipelago Network" — Indonesian cloud infrastructure
   provider. Deep night-sky navy (data center at night) punctuated by
   signal-teal (live network traffic) and a restrained batik-gold accent.
   ========================================================================== */

:root{
  /* ---- Color: core ---- */
  --navy-950:#080f1e;
  --navy-900:#0c1830;
  --navy-800:#122442;
  --navy-700:#1a3358;
  --navy-600:#254672;

  --cloud-50:#f6f8fc;
  --cloud-100:#eef2f8;
  --cloud-200:#dfe6f0;

  --teal-600:#0d8f83;
  --teal-500:#16a89b;
  --teal-400:#3cc9bb;
  --teal-300:#8fe3d9;
  --teal-glow:rgba(22,168,155,.35);

  --gold-600:#c8850a;
  --gold-500:#e8a333;
  --gold-400:#f2bc5e;

  --flag-red:#b52a2e;

  --slate-700:#33455c;
  --slate-500:#5c7085;
  --slate-400:#889bb0;
  --slate-300:#b8c6d6;

  --white:#ffffff;

  /* ---- Semantic ---- */
  --bg-page:var(--cloud-50);
  --bg-surface:var(--white);
  --bg-dark:var(--navy-950);
  --bg-dark-alt:var(--navy-900);
  --text-primary:var(--navy-950);
  --text-muted:var(--slate-500);
  --text-on-dark:var(--cloud-50);
  --text-on-dark-muted:var(--slate-300);
  --border-soft:var(--cloud-200);
  --accent:var(--teal-500);
  --accent-strong:var(--teal-600);
  --accent-gold:var(--gold-500);

  /* ---- Type ---- */
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', 'Consolas', monospace;

  /* ---- Scale ---- */
  --step--1: clamp(.83rem, .8rem + .1vw, .9rem);
  --step-0: clamp(1rem, .96rem + .18vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.12rem + .35vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.35rem + .7vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.3vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.9rem + 2.2vw, 3.6rem);
  --step-5: clamp(3rem, 2.2rem + 3.6vw, 5rem);

  /* ---- Layout ---- */
  --maxw: 1240px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-soft: 0 8px 30px -12px rgba(10,22,40,.18);
  --shadow-strong: 0 24px 60px -20px rgba(6,14,28,.35);

  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}