/* ============================================================
   Global Andalan Solusi (GAS) — Design Tokens
   Colors, type, spacing, radii, shadows
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ────────── BRAND COLORS ──────────
     Sampled from LOGO GAS NEW OOLOR.svg + andalan.asia
     The mark is a sphere of fractured shapes in a teal→blue gradient.
  */
  --gas-teal:        #43B8B9;   /* primary teal — dominant in logo */
  --gas-teal-deep:   #3EAFBA;   /* slightly darker mid-teal */
  --gas-aqua:        #2F95BE;   /* aqua-blue transition shade */
  --gas-cyan-blue:   #2B8DBF;   /* darker blue-cyan */
  --gas-blue:        #1B71C3;   /* mid corporate blue */
  --gas-blue-deep:   #1363C5;   /* deepest brand blue */

  /* Wordmark / display */
  --gas-ink:         #0B1220;   /* near-black for GAS lettering, headings */
  --gas-ink-soft:    #1F2A3A;   /* secondary ink */

  /* ────────── NEUTRAL SCALE ────────── */
  --n-0:   #FFFFFF;
  --n-25:  #FAFBFC;
  --n-50:  #F4F6F8;
  --n-100: #E8ECF1;
  --n-200: #D4DBE3;
  --n-300: #B6C0CC;
  --n-400: #8A97A6;
  --n-500: #5D6B7B;
  --n-600: #41505F;
  --n-700: #2C3845;
  --n-800: #1A2330;
  --n-900: #0B1220;

  /* ────────── SEMANTIC SURFACE ────────── */
  --bg:           var(--n-0);
  --bg-soft:      var(--n-25);
  --bg-muted:     var(--n-50);
  --bg-inverse:   var(--n-900);

  --surface:      var(--n-0);
  --surface-2:    var(--n-50);
  --surface-dark: #0E1A2A;          /* deep navy used in dark sections */
  --surface-hero: #0A1830;          /* hero gradient base */

  --fg:           var(--gas-ink);
  --fg-1:         var(--gas-ink);   /* primary text */
  --fg-2:         var(--n-600);     /* secondary text */
  --fg-3:         var(--n-500);     /* tertiary / labels */
  --fg-mute:      var(--n-400);     /* placeholder, captions */
  --fg-on-dark:   #E8EEF6;
  --fg-on-dark-2: #9FB1C7;

  --border:       var(--n-100);
  --border-strong: var(--n-200);
  --divider:      var(--n-100);

  /* ────────── BRAND-AS-INTENT ────────── */
  --primary:        var(--gas-blue);
  --primary-hover:  var(--gas-blue-deep);
  --primary-press:  #0E54AB;
  --accent:         var(--gas-teal);
  --accent-hover:   var(--gas-teal-deep);

  /* ────────── SEMANTIC STATE ────────── */
  --success: #1F9D6A;
  --warning: #E89A1C;
  --danger:  #D43A3A;
  --info:    var(--gas-blue);

  /* ────────── GRADIENTS ──────────
     The logo's teal→blue sweep is the brand's signature.
  */
  --grad-brand:     linear-gradient(135deg, var(--gas-teal) 0%, var(--gas-aqua) 45%, var(--gas-blue) 100%);
  --grad-brand-soft: linear-gradient(135deg, #E6F6F6 0%, #E1EEF9 100%);
  --grad-hero:      linear-gradient(135deg, #0A1830 0%, #0E2A4B 55%, #135789 100%);
  --grad-mesh:      radial-gradient(at 12% 18%, rgba(67,184,185,0.22) 0, transparent 50%),
                    radial-gradient(at 88% 12%, rgba(27,113,195,0.28) 0, transparent 55%),
                    radial-gradient(at 60% 88%, rgba(19,99,197,0.20) 0, transparent 50%);

  /* ────────── TYPOGRAPHY ──────────
     Display: Plus Jakarta Sans — Indonesian-origin, modern geometric sans
     UI/Body: Inter — for dense corporate copy + tables
     Substitution note: original site uses generic web-safe stack; we
     standardize on Jakarta + Inter to give the brand a contemporary feel.
  */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale (1.250 — major third), tuned for corporate site */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-44: 2.75rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ────────── SPACING ──────────
     4px base. Use these on padding, gap, margin.
  */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;
  --s-32:  128px;

  /* ────────── RADII ────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ────────── SHADOWS ──────────
     Soft, layered. Cards use elevation-1; modals elevation-3.
  */
  --shadow-1: 0 1px 2px rgba(11,18,32,0.04), 0 2px 8px rgba(11,18,32,0.05);
  --shadow-2: 0 2px 4px rgba(11,18,32,0.05), 0 12px 24px rgba(11,18,32,0.08);
  --shadow-3: 0 8px 16px rgba(11,18,32,0.08), 0 24px 48px rgba(11,18,32,0.14);
  --shadow-brand: 0 12px 28px rgba(19,99,197,0.28);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ────────── MOTION ────────── */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ────────── LAYOUT ────────── */
  --container:    1200px;
  --container-lg: 1320px;
  --gutter:       24px;
  --section-y:    96px;
}

/* ────────── BASE / RESET (lightweight) ────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }

/* ────────── SEMANTIC TYPE ──────────
   Use these classnames OR the element selectors.
*/
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw + 1rem, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 2.4vw + 0.8rem, var(--fs-44));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  margin: 0;
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
}
.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-base);
  color: var(--fg-2);
  font-weight: 400;
}
p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0;
}
small, .caption {
  font-size: var(--fs-13);
  color: var(--fg-3);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Helpers */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-6 > * + * { margin-top: var(--s-6); }