/* ============================================================
   Delta Gates — Design Tokens
   Source of truth: Figma file "Delta Gates" → 🎨 Design System
   Mirrors variable names 1:1 (slash → kebab).

   --mg-* aliases at the bottom let mulgrave-base structural CSS
   (base.css section utilities) consume Delta's primitives without
   rewriting parent CSS. See DECISIONS.md "Child token strategy".
   ============================================================ */

:root {
  /* ── COLOR · PRIMITIVES ──────────────────────────────────── */
  --color-brand-charcoal:     #0e100f;
  --color-brand-cream:        #f2efe6;
  --color-brand-cream-soft:   #fcfbf8;
  --color-brand-olive:        #2e480c;
  --color-brand-olive-hover:  #294108;
  --color-brand-olive-mid:    #5e7c36;
  --color-brand-olive-soft:   #a5c775;

  --color-neutral-50:  #fcfbf8;
  --color-neutral-100: #f5f2e9;
  --color-neutral-200: #e8e5dc;
  --color-neutral-300: #cec6ad;
  --color-neutral-400: #a5aa9c;
  --color-neutral-500: #8d9581;
  --color-neutral-600: #727968;
  --color-neutral-700: #62685a;
  --color-neutral-800: #2a2d27;
  --color-neutral-900: #0e100f;

  --color-white:       #ffffff;
  --color-white-15:    rgb(255 255 255 / 0.15);
  --color-transparent: transparent;

  --color-status-error:   #b94a4a;
  --color-status-success: #589a00;
  --color-status-warning: #c08a3e;
  --color-status-star:    #f8bd00;

  /* ── COLOR · SEMANTIC (alias the primitives above) ───────── */
  --color-surface-page:        var(--color-brand-cream);
  --color-surface-page-dark:   var(--color-brand-charcoal);
  --color-surface-card:        var(--color-brand-cream-soft);
  --color-surface-card-dark:   var(--color-neutral-800);
  --color-surface-accent:      var(--color-brand-olive);
  --color-surface-accent-mid:  var(--color-brand-olive-mid);
  --color-surface-accent-soft: var(--color-brand-olive-soft);

  --color-text-primary:       var(--color-neutral-900);
  --color-text-secondary:     var(--color-neutral-700);
  --color-text-muted:         var(--color-neutral-500);
  --color-text-inverse:       var(--color-white);
  --color-text-inverse-muted: var(--color-neutral-300);
  --color-text-accent:        var(--color-brand-olive-hover);
  --color-text-accent-soft:   var(--color-brand-olive-soft);

  --color-border-default: var(--color-neutral-200);
  --color-border-strong:  var(--color-neutral-300);
  --color-border-inverse: var(--color-white-15);

  --color-button-bg:       var(--color-brand-olive);
  --color-button-bg-hover: var(--color-brand-olive-hover);
  --color-button-text:     var(--color-white);

  --color-link:        var(--color-brand-olive);
  --color-link-hover:  var(--color-brand-olive-hover);
  --color-focus-ring:  var(--color-brand-olive);

  /* Body-text consolidated — TWO colours across the whole landing:
     one for any light bg, one for any dark bg. Both at 75% alpha.
     Headings keep the full-strength primary / inverse colours. */
  --color-body-on-light: color-mix(in srgb, var(--color-text-primary) 75%, transparent);
  --color-body-on-dark:  color-mix(in srgb, var(--color-text-inverse) 75%, transparent);

  /* ── SPACING SCALE ───────────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */
  --space-11: 10rem;     /* 160px */
  --space-12: 12rem;     /* 192px */

  /* ── RADIUS ──────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ── CONTAINER ───────────────────────────────────────────── */
  --container-max:    1200px;
  --container-narrow: 768px;
  --container-wide:   1440px;
  --container-gutter: 1.5rem;   /* 24px */

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px  rgb(0 0 0 / 0.04);
  --shadow-md: 0 2px 8px  rgb(0 0 0 / 0.06);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.08);

  /* ── FONT FAMILIES ───────────────────────────────────────── */
  --font-display: "Domine", Georgia, serif;
  --font-body:    "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui:      "Sofia Sans Semi Condensed", "Sofia Sans", system-ui, sans-serif;
}

/* ============================================================
   --mg-* alias layer (maps Mulgrave parent token names → Delta primitives)
   Keep at the bottom so it overrides parent fallbacks via load order.
   ============================================================ */
:root {
	/* Brand */
	--mg-color-brand-1: var(--color-brand-olive);
	--mg-color-brand-2: var(--color-brand-cream);
	--mg-color-brand-3: var(--color-brand-charcoal);

	/* Surfaces */
	--mg-surface-page:        var(--color-surface-page);
	--mg-surface-page-dark:   var(--color-surface-page-dark);
	--mg-surface-accent:      var(--color-surface-accent);
	--mg-surface-accent-soft: var(--color-surface-accent-soft);

	/* Text */
	--mg-text-default: var(--color-text-primary);
	--mg-text-inverse: var(--color-text-inverse);

	/* Spacing (1:1 with Delta scale) */
	--mg-space-0:  var(--space-0);
	--mg-space-1:  var(--space-1);
	--mg-space-2:  var(--space-2);
	--mg-space-3:  var(--space-3);
	--mg-space-4:  var(--space-4);
	--mg-space-5:  var(--space-5);
	--mg-space-6:  var(--space-6);
	--mg-space-7:  var(--space-7);
	--mg-space-8:  var(--space-8);
}