/* =============================================================
   DESIGN TOKENS — the single place to change the look of the site.

   Edit values here; do not add colour literals anywhere else. Every
   stylesheet rule reads from these custom properties, so changing one
   value here repaints the whole site.

   Munodha and Synodha deliberately share the same blue. They are separate
   brands with separate content, but one visual system, so a change made
   here should usually be mirrored in the other site's tokens.css.
   ============================================================= */

:root {
  /* ---- Brand ramp -------------------------------------------------
     One hue, six steps. brand-500 is the primary action colour; 600/700
     are hover and pressed; 50/100 are washes behind cards and callouts. */
  --brand-50:   #eaf2fe;
  --brand-100:  #e6effd;
  --brand-400:  #2f6fed;
  --brand-500:  #2563eb;
  --brand-600:  #1d4ed8;
  --brand-700:  #1e40af;

  /* ---- Ink --------------------------------------------------------- */
  --ink-900:    #1f2937;   /* headings and primary text */
  --ink-600:    #566173;   /* secondary text, captions */

  /* ---- Surfaces and rules ------------------------------------------ */
  --surface:      #ffffff;
  --surface-sunk: #f6f9fc;
  --rule:         #e3e8ef;

  /* ---- Type -------------------------------------------------------- */
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Spacing scale ----------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius and elevation ---------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(31, 41, 55, .05);
  --shadow-md: 0 1px 2px rgba(31, 41, 55, .05), 0 10px 28px -20px rgba(31, 41, 55, .35);

  /* ---- Layout ------------------------------------------------------ */
  --nav-height: 76px;
  --shell-max:  1160px;
  --prose-max:  68ch;

  /* =================================================================
     LEGACY ALIASES

     The stylesheet was written against these names before the palette
     was reworked to blue, which is why "--teal" and "--mint" hold blues
     and "--coral" holds a navy. Rather than rewrite ~2,700 lines and risk
     regressions, they now simply point at the ramp above. New rules
     should use the token names above; these stay so existing rules keep
     working, and so a single edit above still moves everything.
     ================================================================= */
  --ink:       var(--ink-900);
  --ink-soft:  var(--ink-600);
  --paper:     var(--surface);
  --white:     var(--surface);
  --line:      var(--rule);
  --teal:      var(--brand-500);
  --teal-dark: var(--brand-600);
  --mint:      var(--brand-50);
  --sky:       var(--brand-100);
  --sun:       var(--brand-400);
  --coral:     var(--brand-700);

  color-scheme: light;
  font-family: var(--font-sans);
  font-synthesis: none;
}