/* =============================================================================
 * MIA — Design Tokens
 * Corporate design system for web/marketing surfaces.
 * Source of truth: docs/corporate_design.md
 * ============================================================================= */

:root {
    /* --- Color · Mono ramp --------------------------------------------------- */
    --mia-black:      #0A0A0B;   /* canvas, default page bg on dark */
    --mia-ink:        #111315;   /* surface 1 */
    --mia-graphite:   #1B1E22;   /* surface 2 — cards on dark */
    --mia-slate:      #3A4047;   /* dividers, muted borders */
    --mia-mute:       #8A9097;   /* secondary text on dark */
    --mia-paper:      #F5F5F2;   /* off-white surface */
    --mia-white:      #FFFFFF;   /* pure */

    /* --- Color · Accents ---------------------------------------------------- */
    /* Primary — Deep Teal: identity, links, primary buttons */
    --mia-teal:       #0E7C7B;
    --mia-teal-hi:    #14A8A6;
    --mia-teal-lo:    #064E4D;

    /* Secondary — Warm Amber: CTAs, key highlights, focus ring */
    --mia-amber:      #E0A458;
    --mia-amber-hi:   #F2BE76;
    --mia-amber-lo:   #A6722B;

    /* --- Color · Semantic --------------------------------------------------- */
    --mia-success:    var(--mia-teal-hi);
    --mia-warning:    var(--mia-amber);
    --mia-danger:     #C8443A;
    --mia-info:       #5B8FB9;

    /* --- Color · Roles (dark theme is default) ----------------------------- */
    --color-bg:           var(--mia-black);
    --color-surface-1:    var(--mia-ink);
    --color-surface-2:    var(--mia-graphite);
    --color-text:         var(--mia-white);
    --color-text-muted:   var(--mia-mute);
    --color-border:       rgba(255, 255, 255, 0.08);
    --color-border-strong:rgba(255, 255, 255, 0.16);
    --color-link:         var(--mia-teal-hi);
    --color-link-hover:   var(--mia-amber-hi);
    --color-accent:       var(--mia-teal);
    --color-cta:          var(--mia-amber);
    --color-focus:        var(--mia-amber-hi);
    --color-selection-bg: var(--mia-teal);
    --color-selection-fg: var(--mia-white);

    /* --- Typography --------------------------------------------------------- */
    --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI",
                    Roboto, Inter, Helvetica, Arial, sans-serif;
    --font-body:    var(--font-display);
    --font-mono:    "IBM Plex Mono", ui-monospace, "JetBrains Mono",
                    "SF Mono", Consolas, "Liberation Mono", monospace;

    /* Modular scale — major third (1.250), base 16px */
    --fs-12: 0.75rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-30: 1.875rem;
    --fs-38: 2.375rem;
    --fs-48: 3rem;
    --fs-60: 3.75rem;
    --fs-76: 4.75rem;

    --lh-tight:  1.1;
    --lh-snug:   1.25;
    --lh-normal: 1.6;
    --lh-loose:  1.75;

    --tracking-tight:  -0.02em;
    --tracking-snug:   -0.01em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;
    --tracking-caps:   0.12em;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;

    /* --- Spacing · 8pt grid ------------------------------------------------- */
    --space-0:  0;
    --space-1:  0.25rem;   /*  4 */
    --space-2:  0.5rem;    /*  8 */
    --space-3:  0.75rem;   /* 12 */
    --space-4:  1rem;      /* 16 */
    --space-5:  1.5rem;    /* 24 */
    --space-6:  2rem;      /* 32 */
    --space-7:  3rem;      /* 48 */
    --space-8:  4rem;      /* 64 */
    --space-9:  6rem;      /* 96 */
    --space-10: 8rem;      /* 128 */

    /* --- Layout ------------------------------------------------------------- */
    --container-max: none;                        /* fluid: pages use the full width */
    --container-pad: clamp(1rem, 2vw, 2rem);

    /* breakpoints (reference values; use in media queries) */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* --- Radii -------------------------------------------------------------- */
    --radius-0: 0;
    --radius-1: 4px;
    --radius-2: 8px;
    --radius-3: 16px;
    --radius-pill: 9999px;

    /* --- Elevation (intentionally restrained) ------------------------------ */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
    --hairline: inset 0 0 0 1px var(--color-border);

    /* --- Motion ------------------------------------------------------------- */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 120ms;
    --dur-med:  200ms;
    --dur-slow: 320ms;

    /* --- Z-index ------------------------------------------------------------ */
    --z-nav:    50;
    --z-modal:  100;
    --z-toast:  200;

    color-scheme: dark;
}

/* Light theme override — opt in via data-theme="light" on <html> or any section */
:where([data-theme="light"]) {
    --color-bg:           var(--mia-paper);
    --color-surface-1:    var(--mia-white);
    --color-surface-2:    #ECECE7;
    --color-text:         var(--mia-black);
    --color-text-muted:   #555B62;
    --color-border:       rgba(10, 10, 11, 0.10);
    --color-border-strong:rgba(10, 10, 11, 0.20);
    --color-link:         var(--mia-teal-lo);
    --color-link-hover:   var(--mia-amber-lo);
    color-scheme: light;
}

/* =============================================================================
 * Base reset & primitives
 * ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-16);
    line-height: var(--lh-normal);
    font-weight: var(--fw-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-semi);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    margin: 0 0 var(--space-4);
}

h1 { font-size: clamp(var(--fs-38), 6vw, var(--fs-76)); }
h2 { font-size: clamp(var(--fs-30), 4vw, var(--fs-48)); }
h3 { font-size: var(--fs-30); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--fs-24); letter-spacing: var(--tracking-snug); }
h5 { font-size: var(--fs-20); }
h6 { font-size: var(--fs-18); }

p { margin: 0 0 var(--space-4); }

small { font-size: var(--fs-14); color: var(--color-text-muted); }

code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.95em;
}

a {
    color: var(--color-link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-link-hover); border-bottom-color: currentColor; }

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
}

::selection {
    background: var(--color-selection-bg);
    color: var(--color-selection-fg);
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-1);
}

img, svg { max-width: 100%; display: block; }

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
 * Utility primitives (kept minimal — not a framework)
 * ============================================================================= */

.mia-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.mia-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--mia-teal-hi);
}

.mia-muted { color: var(--color-text-muted); }
.mia-mono  { font-family: var(--font-mono); }