/* ============================================================
   PBP Design System — colors_and_type.css
   PT. Putra Bulian Properti
   ============================================================ */

/* --- Webfonts (Google Fonts) ------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND COLORS (from logo) -------------------- */
  --brand-red:      #E31B23;   /* logo red — primary accent, CTAs, alerts */
  --brand-red-deep: #B8131A;   /* hover / pressed */
  --brand-blue:     #1E3FAE;   /* logo royal blue — secondary interactive */
  --brand-blue-deep:#162E80;
  --brand-amber:    #F2A612;   /* logo yellow/ochre — highlights, kickers */
  --brand-amber-deep:#C78208;
  --brand-black:    #0E0E10;   /* logo black */

  /* ---------- NEUTRAL / PAPER ---------------------------- */
  --paper:          #FDFBF6;   /* near-white with warm undertone — dominant canvas */
  --paper-raised:   #FFFFFF;   /* pure white — cards / elevated surfaces */
  --paper-sunk:     #F5F1E8;   /* gentle recess — subtle alternating bands */

  --ink:            #2A2C38;   /* softened ink — primary text + inverted surfaces (lighter than before) */
  --ink-2:          #3D4050;   /* secondary ink surface */
  --ink-soft:       #585B6C;

  /* ---------- TYPOGRAPHY COLOR ROLES --------------------- */
  --fg-1:           #1F2028;            /* primary text — kept dark for contrast on lighter paper */
  --fg-2:           #4A4C5A;            /* secondary text */
  --fg-3:           #7D7F8E;            /* tertiary / captions */
  --fg-muted:       #A8AAB8;            /* placeholders */
  --fg-inverted:    var(--paper);
  --fg-on-red:      #FFFFFF;
  --fg-on-amber:    var(--ink);

  --bg-1:           var(--paper);
  --bg-2:           var(--paper-raised);
  --bg-3:           var(--paper-sunk);
  --bg-inverted:    var(--ink);
  --bg-inverted-2:  var(--ink-2);

  /* ---------- LINES ------------------------------------- */
  --line:           #EAE4D6;   /* lighter warm hairline */
  --line-strong:    #D0C8B5;
  --line-inverted:  #4A4D60;   /* on ink surfaces */

  /* ---------- EARTH / INFRA PALETTE --------------------- */
  --ochre:          #C78208;
  --ochre-soft:     #FBEBB8;   /* lighter, creamier */
  --laterite:       #A84A26;   /* slightly lighter Sumatran red-earth */
  --coal:           #3A3C4A;   /* lifted off pure black */
  --steel:          #7A8192;
  --forest:         #3E7049;

  /* ---------- SEMANTIC ---------------------------------- */
  --success:        #2F5D3A;
  --warning:        var(--brand-amber);
  --danger:         var(--brand-red);
  --info:           var(--brand-blue);

  --success-bg:     #EEF5E7;
  --warning-bg:     #FDF2D7;
  --danger-bg:      #FBE7E8;
  --info-bg:        #E8EDF8;

  /* ---------- TYPE FAMILIES ----------------------------- */
  /* Figtree is used as the super-family for both display and body (weights 300–900). */
  --font-display:   'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:      'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (rem) -------------------------- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;
  --fs-96: 6rem;

  /* ---------- LINE HEIGHT ------------------------------- */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ---------- LETTER SPACING ---------------------------- */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-kicker: 0.14em;   /* for UPPERCASE eyebrows */

  /* ---------- SPACING (4px base) ------------------------ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- RADII ------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ----------------------------------- */
  --shadow-soft:    0 1px 2px rgba(23,24,33,.04), 0 2px 8px rgba(23,24,33,.05);
  --shadow-raised:  0 2px 4px rgba(23,24,33,.06), 0 8px 24px rgba(23,24,33,.10);
  --shadow-deep:    0 4px 8px rgba(23,24,33,.08), 0 20px 48px rgba(23,24,33,.16);

  /* ---------- MOTION ------------------------------------ */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-inout:  cubic-bezier(.4,0,.2,1);
  --dur-micro:   120ms;
  --dur-comp:    240ms;
  --dur-page:    400ms;

  /* ---------- LAYOUT ------------------------------------ */
  --container-max: 1280px;
  --gutter:        32px;
  --gutter-mobile: 16px;

  /* ---------- PATTERNS ---------------------------------- */
  --pattern-hatch: repeating-linear-gradient(
    45deg,
    transparent 0 6px,
    rgba(42,44,56,.035) 6px 7px
  );
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-40), 6vw, var(--fs-80));
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-32), 4vw, var(--fs-48));
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
  max-width: 68ch;
}

.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  font-weight: 400;
}

small, .caption {
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.kicker {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--fg-3);
}

.kicker-red    { color: var(--brand-red); }
.kicker-amber  { color: var(--brand-amber-deep); }
.kicker-blue   { color: var(--brand-blue); }

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-48), 8vw, var(--fs-96));
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

code, .mono, .tabular {
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
}

code {
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--fg-1);
}

a {
  color: var(--brand-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--dur-micro) var(--ease-out);
}
a:hover { text-decoration-thickness: 2px; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-6) 0;
}

::selection {
  background: var(--brand-amber);
  color: var(--ink);
}