/*
 * ============================================================================
 * PROVISIONAL Academia MG visual tokens — NOT an official brand standard.
 * ============================================================================
 *
 * Academia MG is working with a graphic designer on formal brand guidelines that
 * do not exist yet. Everything in this file is a temporary, tasteful choice made
 * to ship V0.1 — it is explicitly NOT a brand decision, and nothing downstream
 * should be documented as if it were.
 *
 * HOW THE BRAND UPDATE WILL WORK
 * ------------------------------
 * Every component in `inscripciones.css` reads only `--mg-*` custom properties.
 * No component hard-codes a hex value, a font stack, a radius or a shadow. So
 * when the official guidelines arrive, the update is: rewrite the values in THIS
 * FILE (and swap the font files), and the whole registration experience follows.
 * No template needs to be touched and no flow needs rebuilding.
 *
 * The `--mg-*` layer is defined here in terms of the shared @mg/design tokens
 * where a sensible equivalent already exists, so this app inherits MG's current
 * look instead of inventing a second one — while keeping a single seam to cut
 * when the real guidelines land.
 */

:root {
  /* ---------------------------------------------------------------- colour */
  --mg-background: var(--bg, #080808);
  --mg-background-raised: var(--bg-raised, #101010);
  --mg-surface: var(--surface-strong, #171717);
  --mg-surface-soft: var(--surface-soft, #111111);

  --mg-text: var(--text, #f6f6f3);
  --mg-text-soft: var(--text-soft, #c8c8c4);
  --mg-muted: var(--text-muted, #929292);

  --mg-border: var(--border, rgba(255, 255, 255, 0.1));
  --mg-border-strong: var(--border-strong, rgba(255, 255, 255, 0.17));

  --mg-primary: var(--accent, #c9ff28);
  --mg-primary-hover: var(--accent-hover, #d8ff63);
  --mg-primary-soft: var(--accent-soft, rgba(201, 255, 40, 0.12));
  /* On the MG lime, text must be dark. Kept as a token so a brand palette with a
     dark primary only has to flip this one value. */
  --mg-on-primary: #0b0b0b;

  --mg-secondary: var(--text-soft, #c8c8c4);

  --mg-success: var(--success, #5ee29b);
  --mg-success-soft: var(--success-soft, rgba(94, 226, 155, 0.12));
  --mg-warning: var(--warning, #f5c451);
  --mg-warning-soft: var(--warning-soft, rgba(245, 196, 81, 0.12));
  --mg-danger: var(--danger, #ff7f7f);
  --mg-danger-soft: var(--danger-soft, rgba(255, 127, 127, 0.12));

  /* Neutral-positive: "we have it, nobody has checked it yet". Distinct from
     success (verified) and warning (something is missing). Added in V0.2 for
     the payment-state chips. */
  --mg-info: #8fbcd4;
  --mg-info-soft: rgba(143, 188, 212, 0.14);

  /* ------------------------------------------------------------ typography */
  --mg-font-body: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);
  --mg-font-heading: var(--mg-font-body);

  --mg-weight-body: 400;
  --mg-weight-medium: 500;
  --mg-weight-heading: 600;

  --mg-size-xs: 0.75rem;
  --mg-size-sm: 0.875rem;
  --mg-size-base: 1rem;
  --mg-size-lg: 1.125rem;
  --mg-size-xl: 1.375rem;
  --mg-size-2xl: 1.75rem;
  --mg-size-3xl: 2.25rem;

  --mg-leading-tight: 1.2;
  --mg-leading-body: 1.6;
  --mg-tracking-eyebrow: 0.16em;

  /* --------------------------------------------------------------- spacing */
  --mg-space-1: 0.25rem;
  --mg-space-2: 0.5rem;
  --mg-space-3: 0.75rem;
  --mg-space-4: 1rem;
  --mg-space-5: 1.5rem;
  --mg-space-6: 2rem;
  --mg-space-7: 3rem;
  --mg-space-8: 4rem;

  --mg-measure: 34rem; /* the form column — comfortable on mobile and desktop */

  /* ----------------------------------------------------------------- shape */
  --mg-radius-sm: 6px;
  --mg-radius: 10px;
  --mg-radius-lg: 16px;
  --mg-radius-pill: 999px;

  --mg-border-width: 1px;

  --mg-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.18);
  --mg-shadow: var(--shadow-md, 0 18px 48px rgba(0, 0, 0, 0.26));
  --mg-shadow-lg: var(--shadow-lg, 0 30px 90px rgba(0, 0, 0, 0.48));

  /* --------------------------------------------------------------- motion */
  --mg-transition: 140ms ease;

  /* --------------------------------------------------------- control sizes */
  --mg-control-height: 48px; /* thumb-friendly; parents fill this on a phone */
  --mg-focus-ring: 2px solid var(--mg-primary);
  --mg-focus-offset: 2px;
}