/* Gravitas brand tokens, taken from gravitas.my (Oct 2026).
   Red #ff1503 is the primary, orange #fe6a16 and yellow #ffbb14 are accents,
   cream #fff6ec is the page. Headings are Manrope, body is Noto Sans. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --gv-red: #ff1503;
  --gv-red-hover: #e01202;
  --gv-orange: #fe6a16;
  --gv-yellow: #ffbb14;
  --gv-cream: #fff6ec;
  --gv-surface: #fffbf6;
  --gv-surface-2: #fbeee0;
  --gv-line: #f0d9c4;
  --gv-grid-line: rgba(255, 21, 3, .06);
  --gv-ink: #1a1a1a;
  --gv-ink-2: #4a4440;
  --gv-ink-3: #857b73;
  --gv-stone: #c4bcb4;
  --gv-font-head: Manrope, 'Noto Sans', system-ui, sans-serif;
  --gv-font-body: 'Noto Sans', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --gv-red: #ff4a3a; --gv-red-hover: #ff6b5e;
    --gv-cream: #17120f; --gv-surface: #1f1915; --gv-surface-2: #29211c; --gv-line: #3a2f28;
    --gv-grid-line: rgba(255, 74, 58, .07);
    --gv-ink: #fff6ec; --gv-ink-2: #d6cbc1; --gv-ink-3: #9d9188;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --gv-red: #ff4a3a; --gv-red-hover: #ff6b5e;
  --gv-cream: #17120f; --gv-surface: #1f1915; --gv-surface-2: #29211c; --gv-line: #3a2f28;
  --gv-grid-line: rgba(255, 74, 58, .07);
  --gv-ink: #fff6ec; --gv-ink-2: #d6cbc1; --gv-ink-3: #9d9188;
}


body { background: var(--gv-cream); color: var(--gv-ink); font-family: var(--gv-font-body); -webkit-font-smoothing: antialiased; }
/* The faint red grid behind gravitas.my */
.gv-grid {
  background-image:
    linear-gradient(var(--gv-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--gv-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}
.gv-eyebrow { font: 600 12px/1.4 var(--gv-font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--gv-orange); }
/* The logo is black type; flip it for dark pages, keep the orange dots warm. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gv-logo { filter: invert(1) hue-rotate(180deg); } }
:root[data-theme="dark"] .gv-logo { filter: invert(1) hue-rotate(180deg); }