/* ==========================================================================
   Turatech Grand Design v1.0 — Color & Type Tokens
   Doc Ref: 307/MKT-MAN/TTI/IV/2026 — Bagian 5, 6, 7 + Appendix A
   ========================================================================== */

:root {
  /* ---------- Turatech Red (Corporate Primary) — §5.2 ----------------- */
  --red-50:  #FFF1F2;
  --red-100: #FFE4E6;
  --red-200: #FCA5A5;
  --red-300: #F87171;
  --red-400: #F05258;
  --red-500: #ED1C24;   /* BRAND PRIMARY — logo, CTA korporat */
  --red-600: #C8161D;   /* body-safe on white (WCAG AA) */
  --red-700: #A11318;
  --red-800: #7A0F13;
  --red-900: #530A0D;
  --red-950: #2D0607;

  /* ---------- Warm Stone Neutrals — §5.4 ------------------------------ */
  --white:     #FFFFFF;
  --stone-50:  #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --ink:       #1C1917;   /* hampir hitam, tapi hangat */

  /* ---------- Semantic — UI state only (NOT marketing) — §5.5 -------- */
  --success: #16A34A;
  --warning: #F59E0B;
  --danger:  #DC2626;     /* berbeda dari brand red */
  --info:    #2563EB;

  /* ---------- Data-viz palette (deuteranopia-safe) — §5.6 ------------ */
  --dv-1: #ED1C24;  /* Turatech Red — series utama */
  --dv-2: #292524;  /* Ink — baseline */
  --dv-3: #F59E0B;  /* Amber */
  --dv-4: #16A34A;  /* Green */
  --dv-5: #7C3AED;  /* Violet */
  --dv-6: #0891B2;  /* Teal */
  --dv-7: #78716C;  /* Stone */

  /* ---------- Semantic surface aliases -------------------------------- */
  --bg-page:     var(--white);
  --bg-subtle:   var(--stone-50);
  --bg-panel:    var(--stone-100);
  --bg-inverse:  var(--ink);

  --fg-1:        var(--ink);
  --fg-2:        var(--stone-700);
  --fg-3:        var(--stone-500);
  --fg-on-brand: var(--white);
  --fg-on-dark:  var(--white);

  --border:        var(--stone-200);
  --border-strong: var(--stone-300);
  --border-emph:   var(--ink);

  /* ---------- Typography — §6.1 (OS-stack, no licensing) ------------- */
  --font-sans: "Aptos", -apple-system, "SF Pro Text", "Segoe UI", "Inter", system-ui, sans-serif;
  --font-mono: "Consolas", "Menlo", "SF Mono", ui-monospace, monospace;

  /* ---------- Type scale (10 levels, ratio 1.25) — §6.2 -------------- */
  --fs-display:  64px;   /* 48 pt — hero, big-number */
  --fs-h1:       48px;   /* 36 pt */
  --fs-h2:       36px;   /* 27 pt */
  --fs-h3:       28px;   /* 21 pt */
  --fs-h4:       22px;   /* 16 pt */
  --fs-h5:       18px;   /* 14 pt */
  --fs-body-lg:  18px;   /* 14 pt — lead */
  --fs-body:     16px;   /* 12 pt — default */
  --fs-body-sm:  14px;   /* 11 pt — caption */
  --fs-micro:    12px;   /*  9 pt — legal */

  --lh-display: 1.10;
  --lh-h1:      1.15;
  --lh-h2:      1.20;
  --lh-h3:      1.25;
  --lh-h4:      1.30;
  --lh-h5:      1.40;
  --lh-body:    1.60;
  --lh-small:   1.55;
  --lh-micro:   1.50;

  /* ---------- Weight (only 3 used) — §6.3 ---------------------------- */
  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- Spacing — base 4px — §7.1 ------------------------------ */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;
  --sp-4xl: 96px;
  --sp-5xl: 128px;

  /* ---------- Radius — rounded ringan — §7.2 ------------------------- */
  --radius-0:    0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ---------- Layout — §7.3 ------------------------------------------ */
  --container: 1280px;
  --container-max: 1440px;
  --gutter-desktop: 24px;
  --gutter-mobile:  16px;

  /* ---------- Shadow (used sparingly — flat first) ------------------- */
  --shadow-xs: 0 1px 2px rgba(28,25,23,0.06);
  --shadow-md: 0 4px 12px rgba(28,25,23,0.08);
  --shadow-lg: 0 12px 32px rgba(28,25,23,0.10);

  /* ---------- Motion — minimal, document-led ------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* ==========================================================================
   Semantic typography classes — §6.2 + §6.4
   Sentence case, left-aligned by default. Bilingual: ID body + EN terminology.
   ========================================================================== */

.t-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.t-h1, h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.t-h2, h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}

.t-h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}

.t-h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.t-h5, h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.t-body-lg, .t-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--fg-2);
}

.t-body, p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-small);
  color: var(--fg-2);
}

.t-micro {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
}

.t-mono, code, pre {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--fg-1);
}

/* Eyebrow / dokumen marker (bukan tagline marketing) */
.t-marker {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-500);
}

/* Big-number — angka bukti dominan (74, 3, 80%) — §10.5 */
.t-bignum {
  font-family: var(--font-sans);
  font-size: 120px;
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  color: var(--red-500);
}

/* ==========================================================================
   Base
   ========================================================================== */

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--red-600); text-decoration: none; }
a:hover { color: var(--red-500); text-decoration: underline; }