/* ==========================================================================
   DESIGN TOKENS  —  Microinfo Broadband ("Modernist" design system)
   ==========================================================================

   Source: the Microinfo brand design (colors, Archivo type, square corners,
   shadows, type scale, section spacing, 1200px layout).

   The raw design-system variables (--color-*, --font-*, --space-*) live in
   ds.css. The --mi-* tokens below are the names the section CSS consumes; each
   one resolves to a design-system value, so retuning ds.css retunes the site.
   ========================================================================== */

:root {
	/* --- Brand ----------------------------------------------------------- */
	--mi-primary:        var(--color-accent);          /* #ec3013 */
	--mi-primary-hover:  var(--color-accent-600);      /* #dd2b0f */
	--mi-primary-soft:   var(--color-accent-100);      /* #fff2ef */
	--mi-accent:         var(--color-accent-2);        /* #e15b47 */
	--mi-accent-hover:   var(--color-accent-2-600);    /* #c94b39 */
	--mi-link:           var(--color-accent-700);      /* AA contrast on bg */

	/* --- Neutrals --------------------------------------------------------- */
	--mi-ink:            var(--color-text);            /* #201e1d */
	--mi-ink-2:          var(--color-neutral-800);
	--mi-ink-3:          var(--color-neutral-700);
	--mi-line:           var(--color-divider);
	--mi-surface:        var(--color-bg);              /* #f3f2f2 */
	--mi-surface-2:      var(--color-surface);         /* #eae9e9 */
	--mi-surface-3:      var(--color-neutral-200);

	/* --- Status ----------------------------------------------------------- */
	--mi-ok:             #15803d;
	--mi-warn:           #b45309;
	--mi-bad:            var(--color-accent-700);

	/* --- Type ------------------------------------------------------------- */
	--mi-font:      var(--font-body);
	--mi-font-head: var(--font-heading);
	--mi-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--mi-text-xs:   0.75rem;                           /* 12px */
	--mi-text-sm:   0.875rem;                          /* 14px */
	--mi-text-base: 0.9375rem;                         /* 15px */
	--mi-text-lg:   1.125rem;                          /* 18px */
	--mi-text-xl:   1.5rem;                            /* 24px */
	--mi-text-2xl:  2rem;                              /* 32px */
	--mi-text-3xl:  clamp(2.5rem, 5.2vw, 4.5rem);      /* 40–72px */
	--mi-text-4xl:  clamp(2.625rem, 6.2vw, 5.25rem);   /* 42–84px hero */

	--mi-leading-tight: 1.12;
	--mi-leading-snug:  1.3;
	--mi-leading-body:  1.55;

	--mi-weight-normal: 400;
	--mi-weight-med:    600;
	--mi-weight-bold:   800;

	/* --- Space ------------------------------------------------------------- */
	--mi-s1:  0.25rem;   /*  4px */
	--mi-s2:  0.5rem;    /*  8px */
	--mi-s3:  0.75rem;   /* 12px */
	--mi-s4:  1rem;      /* 16px */
	--mi-s5:  1.5rem;    /* 24px */
	--mi-s6:  2rem;      /* 32px */
	--mi-s7:  3rem;      /* 48px */
	--mi-s8:  4rem;      /* 64px */
	--mi-s9:  4.5rem;    /* 72px — design section padding */

	/* --- Shape & depth: the design is square-cornered ----------------------- */
	--mi-radius-sm: var(--radius-sm);
	--mi-radius:    var(--radius-md);
	--mi-radius-lg: var(--radius-lg);
	--mi-radius-pill: 999px;

	--mi-shadow-sm: var(--shadow-sm);
	--mi-shadow:    var(--shadow-md);
	--mi-shadow-lg: var(--shadow-lg);

	/* --- On dark surfaces --------------------------------------------------- */
	--mi-on-ink:        var(--color-bg);
	--mi-on-ink-soft:   color-mix(in srgb, var(--color-bg) 80%, transparent);
	--mi-on-ink-muted:  color-mix(in srgb, var(--color-bg) 72%, transparent);

	/* --- Repeated component dimensions ------------------------------------- */
	--mi-dot:   0.5rem;
	--mi-icon:  2.75rem;
	--mi-field: 14rem;
	--mi-form:  34rem;

	/* --- Layout ------------------------------------------------------------ */
	--mi-container: 1200px;
	--mi-measure:   58ch;
	--mi-section-y: var(--mi-s9);
}