/*
 * Mystify Developer Portal - design tokens.
 *
 * Vendored from the Mystify Design System hi-fi handoff. Drop-in module:
 * colors, type ramp, spacing, radii, elevation, motion. Components in
 * styles.css compose on these vars.
 *
 * If a value here ever drifts from the source-of-truth design bundle,
 * the design bundle wins - open the prototype and inspect.
 */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
    /* surfaces & ink (cool greys with violet undertone, never pure black) */
    --ink:                  #0A0B10;
    --ink-elevated:         #13141C;
    --ink-elevated-2:       #1B1D27;
    --ink-elevated-3:       #232634;
    --hairline:             #2A2D3B;
    --hairline-strong:      #383C4D;

    /* text */
    --fg-strong:            #F2F4F8;
    --fg:                   #D6D9E3;
    --fg-muted:             #8A8FA3;
    --fg-dim:               #555A6F;
    --fg-faint:             #383D52;

    /* accent - electric orange, used sparingly */
    --accent:               #FF6A2C;
    --accent-hover:         #FF8A55;
    --accent-press:         #E85510;
    --accent-bg:            rgba(255, 106, 44, 0.08);
    --accent-bg-strong:     rgba(255, 106, 44, 0.16);
    --accent-border:        rgba(255, 106, 44, 0.45);

    /* Multi-stop brand gradient -- used for the wordmark (via
     * mask-image) and any other place we want the brand to read as a
     * vivid ramp instead of flat colour. Stops mirror the original
     * three-shade purple ramp, retoned into the orange family. */
    --gradient-brand:       linear-gradient(135deg, #FFC371 0%, #FF8A55 35%, #FF6A2C 65%, #E85510 100%);

    /* Role-tinted gradients used to color-code which kind of user
     * you're looking at -- avatar circle, "MYSTIFY" pill in the user
     * menu, etc. Both lean warm-orange (no violet) so the palette is
     * single-temperature; the gold-amber Mystify variant stays visually
     * distinct from the brand-orange operator variant. Change here to
     * retheme every role chip in one shot. */
    --gradient-mystify:     linear-gradient(135deg, #FFB347, #E85510);
    --gradient-operator:    linear-gradient(135deg, var(--accent-hover), var(--accent-press));

    /* secondary highlight - reserved for verifier-pass aurora pulse only */
    --aurora-teal:          #3DD9CF;

    /* semantic state colors */
    --ok:                   #3DD68A;
    --ok-bg:                rgba(61, 214, 138, 0.10);
    --ok-border:            rgba(61, 214, 138, 0.40);

    --warn:                 #F5B544;
    --warn-bg:              rgba(245, 181, 68, 0.10);
    --warn-border:          rgba(245, 181, 68, 0.40);

    --fail:                 #FF5E73;
    --fail-bg:              rgba(255, 94, 115, 0.10);
    --fail-border:          rgba(255, 94, 115, 0.40);

    --info:                 #5BB5FF;
    --info-bg:              rgba(91, 181, 255, 0.10);
    --info-border:          rgba(91, 181, 255, 0.40);

    /* type families */
    --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    --font-mono: "Geist Mono", "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    /* type ramp (px) */
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-22: 22px;
    --fs-28: 28px;
    --fs-40: 40px;

    --lh-tight: 1.2;
    --lh-snug: 1.35;
    --lh-body: 1.6;
    --lh-code: 1.5;

    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.06em;

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

    /* spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-14: 56px;
    --space-20: 80px;

    /* layout widths -- centered max-widths for the three content
       densities the design system targets:
         --w-app   : admin / multi-column pages with tables, stat bars
         --w-doc   : general document chrome (settings, wizard step)
         --w-prose : long-form prose (api docs body)
    */
    --w-app: 1280px;
    --w-doc: 920px;
    --w-prose: 720px;

    /* radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-pill: 999px;

    /* elevation */
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.40);
    --shadow-glow-accent:
        0 0 0 1px var(--accent-border) inset,
        0 0 24px -8px var(--accent);
    --shadow-glow-ok:
        0 0 0 1px var(--ok-border) inset,
        0 0 32px -8px var(--ok);

    /* motion */
    --ease-out:    cubic-bezier(0.2, 0.6, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
    --dur-hover:   150ms;
    --dur-state:   200ms;
    --dur-reveal:  600ms;

    /* semantic aliases - components reach for these, not the base ramp */
    --color-bg:            var(--ink);
    --color-surface:       var(--ink-elevated);
    --color-surface-2:     var(--ink-elevated-2);
    --color-surface-3:     var(--ink-elevated-3);
    --color-border:        var(--hairline);
    --color-border-strong: var(--hairline-strong);
    --color-text:          var(--fg);
    --color-text-strong:   var(--fg-strong);
    --color-text-muted:    var(--fg-muted);
    --color-text-dim:      var(--fg-dim);
}

/* base reset */

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

html, body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-14);
    line-height: var(--lh-body);
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
}

body { overflow: hidden; }

::selection {
    background: var(--accent-bg-strong);
    color: var(--color-text-strong);
}

/* themed scrollbars - never the OS default on dark surfaces */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--hairline-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: var(--hairline-strong);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
    transition: background-color var(--dur-hover) var(--ease-out);
}
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--fg-dim);
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:active {
    background-color: var(--accent);
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }