/* ==========================================================================
   Amjad & Hazli — Brand tokens
   --------------------------------------------------------------------------
   The single source of truth for palette, type and radii across the
   marketing site. Every page family stylesheet (services.css, article.css,
   legal.css) is loaded AFTER this file and defines only its own layout
   measurements, so the brand cannot drift between page families again.

   Changing a brand value means changing it here, once.
   ========================================================================== */

:root {
  /* ---- Core palette: warm neutral ramp -------------------------------- */
  --ink:      #0f0e0d;
  --gray-900: #1f1d1a;
  --gray-800: #33312c;
  --gray-700: #524f49;
  --gray-600: #706d66;
  --gray-500: #8f8b85;
  --gray-400: #adaba5;
  --gray-300: #cccac6;
  --gray-200: #e5e5e3;
  --gray-100: #f2f1f0;
  --ivory:    #fafaf9;
  --white:    #ffffff;

  /* ---- Accent -------------------------------------------------------------
     The brand is monochrome: the accent resolves onto the neutral ramp.
     Reintroducing a brand colour means changing only these three lines. */
  --gold:       var(--gray-500);
  --gold-light: var(--gray-300);
  --gold-dark:  var(--gray-600);

  /* ---- Legacy aliases ----------------------------------------------------
     Older markup and stylesheets reference these names inline. They are kept
     so every existing call site keeps resolving, and they all point at the
     ramp above rather than carrying their own values. */
  --color-black:           var(--ink);
  --color-white:           var(--white);
  --color-primary:         var(--ink);
  --color-primary-hover:   var(--gray-900);
  --color-primary-light:   var(--gray-800);
  --color-primary-50:      var(--gray-100);
  --color-primary-100:     var(--gray-200);
  --color-primary-200:     var(--gray-300);
  --color-primary-subtle:  rgba(15, 14, 13, 0.01);
  --color-primary-muted:   rgba(15, 14, 13, 0.08);
  --color-accent:          var(--gold);
  --color-accent-hover:    var(--gold-dark);
  --color-accent-light:    var(--gold-light);

  --color-gray-50:  var(--ivory);
  --color-gray-100: var(--gray-100);
  --color-gray-200: var(--gray-200);
  --color-gray-300: var(--gray-300);
  --color-gray-400: var(--gray-400);
  --color-gray-500: var(--gray-500);
  --color-gray-600: var(--gray-600);
  --color-gray-700: var(--gray-700);
  --color-gray-900: var(--gray-900);

  --color-text-primary:   var(--ink);
  --color-text-secondary: var(--gray-600);
  --color-text-tertiary:  var(--gray-500);
  --color-border:         var(--gray-300);
  --color-border-light:   var(--gray-200);

  /* ---- Status colours ----------------------------------------------------
     Monochrome, matching the rest of the brand. Article callouts need to tell
     tip / warning / danger apart, so they define their own hued set locally in
     css/article.css rather than pushing hues into every page family. */
  --color-success: var(--gray-700);
  --color-error:   var(--gray-800);

  /* ---- Typography ---------------------------------------------------- */
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono:  "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body:    var(--font-sans);
  --font-display: var(--font-serif);

  /* ---- Spacing scale ------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radii ------------------------------------------------------------
     Two radii only: controls and panels. The older three-step scale is
     aliased onto them. */
  --radius-control: 4px;
  --radius-panel:   8px;
  --radius-sm: var(--radius-control);
  --radius-md: var(--radius-panel);
  --radius-lg: var(--radius-panel);

  /* ---- Elevation --------------------------------------------------------
     The design language uses borders rather than shadows. Kept as no-ops so
     existing call sites resolve to nothing instead of breaking. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* ---- Motion -----------------------------------------------------------
     One easing curve for the whole site. Durations are named by intent so
     call sites do not hardcode numbers. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast:   0.18s var(--ease);
  --transition-normal: 0.25s var(--ease);
  --transition-slow:   0.42s var(--ease);

  /* ---- Borders ----------------------------------------------------------
     The design language leans on hairline borders instead of shadows. */
  --hairline: 1px;

  /* ---- Chrome -------------------------------------------------------- */
  --nav-h:          64px;
  --tap-target-min: 44px;
}