/* Copyright (c) 2026 QuarkX Sdn. Bhd. (202501056786 / 1658192-K). All rights reserved. */

/*
 * Design tokens. Single source of truth for colour, type scale, spacing and
 * easing across every page.
 *
 * Loaded before any other stylesheet. Nothing here selects anything: it only
 * declares custom properties, so load order between the consuming stylesheets
 * does not matter.
 */

:root {
  color-scheme: light;

  --paper: #f0e7da;
  --paper-raised: #f4ece3;
  --ink: #221a13;
  /* Supporting copy stays warm but clears AA contrast on paper. */
  --ink-sec: #4f4238;
  --ink-faint: #786652;
  --ink-line: rgba(34, 26, 19, 0.13);
  --ink-line-strong: rgba(34, 26, 19, 0.24);

  --bg-deep: #120d09;
  --bg: #17110c;
  --line: rgba(244, 236, 227, 0.1);
  --line-strong: rgba(244, 236, 227, 0.18);

  --cream: #f4ece3;
  --cream-dim: #d9cdbf;
  --muted: #978876;

  --coral: #d97757;
  --coral-bright: #ff8a5c;
  /* Nudged from #b8512e so letterspaced small caps (kickers) clear AA
     contrast on the bright paper ground; visually indistinguishable. */
  --coral-deep: #b04d2a;
  --coral-soft: rgba(217, 119, 87, 0.12);
  --coral-bdr: rgba(217, 119, 87, 0.35);
  --copper: #b26c3d;
  --maroon: #7a2f2d;

  /*
   * Copper ramp. The palette previously held three unrelated warm values, which
   * left nothing to reach for when a surface needed to be a shade lighter. This
   * is one hue sampled at even steps, so tints, borders, fills and hovers all
   * come from the same family.
   *
   * 50 to 200 are surfaces and borders on the paper ground.
   * 300 to 400 are the light coppers: accents, hovers, dark-ground text.
   * 500 is the base mark. 600 to 700 carry text contrast on light surfaces.
   */
  /*
   * Tonal surfaces. Cards and filled fields sit slightly lighter than the
   * paper ground; separation between sections is whitespace, as on the
   * homepage.
   */
  --paper-bright: #f8f3eb;
  --radius-tile: 14px;

  --copper-50: #faf1e9;
  --copper-100: #f2ddcc;
  --copper-200: #e6c3a7;
  --copper-300: #d9a57f;
  --copper-400: #c68a58;
  --copper-500: #b26c3d;
  --copper-600: #99562d;
  --copper-700: #7c4324;

  /*
   * A newspaper's three voices: a characterful face for headlines, a quiet
   * one for reading, and a grotesque for the furniture, the labels, buttons
   * and captions that are not prose.
   */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Libre Franklin", "Segoe UI", system-ui, sans-serif;

  --text-xs: clamp(0.68rem, 0.64rem + 0.16vw, 0.78rem);
  --text-sm: clamp(0.92rem, 0.87rem + 0.2vw, 1rem);
  --text-base: clamp(1.09rem, 1.02rem + 0.2vw, 1.16rem);
  --text-lg: clamp(1.125rem, 1.04rem + 0.55vw, 1.34rem);
  --text-xl: clamp(1.35rem, 1.12rem + 0.95vw, 1.8rem);
  --text-2xl: clamp(1.8rem, 1.35rem + 1.9vw, 2.9rem);
  --text-3xl: clamp(2.4rem, 1.7rem + 3.2vw, 4.4rem);
  /* The mobile menu's serif links, shared verbatim by both stylesheets. */
  --text-menu: clamp(2rem, 9vw, 3.4rem);
  --text-4xl: clamp(3rem, 1.9rem + 5.4vw, 6.6rem);

  --space-xs: 0.5rem;
  --space-sm: 0.85rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --max-width: 1320px;
  --gutter: clamp(1.4rem, 1rem + 3vw, 4.5rem);
  --header-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}