/* ============================================================================
   Málaga Tech — Design Tokens
   Single source of visual truth. Derived from the logo's two colours + white.
   "Warm restraint": every value stays in the warm family (warm black, gold,
   warm greys, warm red/green/amber). No cool grey, no blue-tinted value.
   Gold is earned — reserved for primary CTAs, active states and key accents.

   This is the ONLY file that holds raw colour hex / off-scale lengths.
   Every component & page stylesheet references these via var(--mt-*).
   ========================================================================== */

:root {
  /* --- Brand & gold ------------------------------------------------------ */
  --mt-color-ink: #111111;            /* primary text / headings — 18.4:1 on white */
  --mt-color-gold: #e8c36a;           /* SURFACE gold — fills behind ink text (ink on gold 10.9:1) */
  --mt-color-gold-text: #8a6a1e;      /* TEXT gold — gold text/links/icons on white — 5.05:1 */
  --mt-color-gold-hover: #d8ae4f;     /* gold fill darkened ~10% for hover (ink on it 8.8:1) */
  --mt-color-gold-active: #c99b33;    /* pressed/active gold fill */
  --mt-color-gold-tint: #fbf6ea;      /* faint gold wash — chips, selected rows, highlights */

  /* --- Warm neutral ramp (no cool grey) ---------------------------------- */
  --mt-color-text-secondary: #5f574c; /* labels, sub-headings — 7.1:1 on white */
  --mt-color-text-muted: #7a7064;     /* captions, metadata, placeholders — 4.85:1 on white */
  --mt-color-border: #e5e0d8;         /* decorative dividers / card edges (paired w/ bg+shadow) */
  --mt-color-border-input: #9c907d;   /* interactive control borders — 3.13:1 non-text */
  --mt-color-surface: #ffffff;        /* primary surface */
  --mt-color-surface-2: #faf8f4;      /* secondary surface — warm off-white (cards, bands) */
  --mt-color-surface-3: #f0ebe2;      /* deeper warm wash — skeleton shimmer peak */

  /* --- Warm semantics (base for text/icon/border + light tint for bg) ----- */
  --mt-color-success: #1f6b43;        /* 6.48:1 on white */
  --mt-color-success-bg: #e8f3ec;
  /* Deepened 2026-08-19: at 1px the previous #b23a2e (74% saturation) was barely distinguishable
     from the warm grey control border. This is 91% saturation and BETTER contrast on both of its
     pairings — 6.86:1 on white, 5.94:1 on the tint below — so it reads as an error without
     leaving the warm palette for a neon red. */
  --mt-color-danger: #b02010;         /* warm brick red, not neon — 6.86:1 on white */
  --mt-color-danger-bg: #fbebe9;
  --mt-color-warning: #8a5a00;        /* deep gold-adjacent amber — 5.93:1 on white */
  --mt-color-warning-bg: #fbf1de;

  /* --- State ------------------------------------------------------------- */
  --mt-color-disabled-bg: #ede7dc;    /* desaturated warm — never grey-blue */
  --mt-color-disabled-text: #9c907d;
  --mt-focus-outline: 2px solid var(--mt-color-ink); /* guaranteed-visible (>=3:1) */
  --mt-focus-offset: 2px;
  --mt-focus-ring: 0 0 0 4px rgba(232, 195, 106, 0.45); /* gold glow carries the brand */

  /* --- Typography -------------------------------------------------------- */
  --mt-font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mt-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --mt-weight-regular: 400;
  --mt-weight-medium: 500;
  --mt-weight-bold: 600;

  /* 1.250 modular scale, base 16px = 1rem, min body 16px */
  --mt-text-caption: 0.75rem;   /* 12 */
  --mt-text-sm: 0.875rem;       /* 14 */
  --mt-text-base: 1rem;         /* 16 */
  --mt-text-lg: 1.125rem;       /* 18 */
  --mt-text-h5: 1.25rem;        /* 20 */
  --mt-text-h4: 1.5625rem;      /* 25 */
  --mt-text-h3: 1.9531rem;      /* ~31 */
  --mt-text-h2: 2.4414rem;      /* ~39 */
  --mt-text-h1: 3.0518rem;      /* ~49 */

  --mt-leading-body: 1.6;
  --mt-leading-ui: 1.5;
  --mt-leading-heading: 1.15;
  --mt-leading-tight: 1.1;

  --mt-tracking-caption: 0.06em;  /* uppercase captions */
  --mt-tracking-heading: -0.01em; /* large headings */

  /* --- Spacing — 8px base (4px half-step at the low end) ------------------ */
  --mt-space-1: 0.25rem;  /* 4 */
  --mt-space-2: 0.5rem;   /* 8 */
  --mt-space-3: 0.75rem;  /* 12 */
  --mt-space-4: 1rem;     /* 16 */
  --mt-space-6: 1.5rem;   /* 24 */
  --mt-space-8: 2rem;     /* 32 */
  --mt-space-12: 3rem;    /* 48 */
  --mt-space-16: 4rem;    /* 64 */
  --mt-space-24: 6rem;    /* 96 */

  /* --- Layout ------------------------------------------------------------ */
  --mt-content-max: 1120px;   /* forms / reading width */
  --mt-content-wide: 1280px;  /* future dense layouts */
  --mt-form-max: 32rem;       /* single-column form column (~512px) */
  --mt-page-pad: var(--mt-space-4);   /* side padding mobile */
  --mt-section-gap: var(--mt-space-12);

  /* --- Shadows (warm-tinted, never blue-grey) ---------------------------- */
  --mt-shadow-sm: 0 1px 2px rgba(60, 45, 15, 0.08);
  --mt-shadow-md: 0 4px 12px rgba(60, 45, 15, 0.10);
  --mt-shadow-lg: 0 12px 32px rgba(60, 45, 15, 0.12);

  /* --- Radii ------------------------------------------------------------- */
  --mt-radius-sm: 6px;     /* inputs, chips */
  --mt-radius-md: 10px;    /* buttons, cards */
  --mt-radius-lg: 16px;    /* large surfaces */
  --mt-radius-pill: 999px; /* status badges */

  /* --- Honoured Bootstrap 5.1 variables (set from --mt- source of truth) -- */
  --bs-body-color: var(--mt-color-ink);
  --bs-body-bg: var(--mt-color-surface);
  --bs-body-font-family: var(--mt-font-body);
  --bs-body-font-size: var(--mt-text-base);
  --bs-body-line-height: var(--mt-leading-body);
  --bs-border-color: var(--mt-color-border);
  --bs-link-color: var(--mt-color-ink);
  --bs-link-hover-color: var(--mt-color-gold-text);
}

@media (min-width: 768px) {
  :root {
    --mt-page-pad: var(--mt-space-6);
    --mt-section-gap: var(--mt-space-16);
  }
}