/*
 * Soutiva Mint
 * The easy, friendly theme: warm cream, white surfaces, pine ink and a
 * generous mint primary. Manrope + Inter + IBM Plex Sans Arabic.
 * Flat colour, soft edges, one clear action per region.
 */
[data-theme="mint"] {
    color-scheme: light;

    --color-paper: 247 244 236;
    --color-paper-raised: 255 255 255;
    --color-paper-sunken: 234 247 242;
    --color-line: 226 235 230;
    --color-line-strong: 180 202 194;
    --color-ink: 10 38 31;
    --color-ink-soft: 43 64 58;
    --color-ink-muted: 91 112 105;
    --color-ink-faint: 147 166 159;
    --color-graphite: 10 38 31;
    --color-graphite-raised: 17 56 47;
    --color-graphite-line: 38 78 68;
    --color-graphite-ink: 244 250 247;
    --color-graphite-muted: 176 199 191;
    --color-graphite-hover: 23 72 60;
    --color-amber: 25 194 160;
    --color-amber-strong: 9 112 91;
    --color-amber-wash: 226 250 244;
    --color-amber-deep: 6 54 45;
    --color-amber-border: 155 232 215;
    --color-teal: 13 92 78;
    --color-teal-wash: 224 246 240;
    --color-teal-border: 154 217 204;
    --color-coral: 255 122 89;
    --color-coral-strong: 179 56 31;
    --color-coral-wash: 255 237 232;
    --color-coral-border: 255 197 182;
    --color-moss: 26 143 114;
    --color-moss-wash: 228 247 241;
    --color-moss-border: 169 224 207;

    --font-display: "Manrope";
    --font-sans: "Inter";
    --font-mono: "IBM Plex Mono";

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 24px;

    --shadow-overlay: 0 30px 80px -36px rgb(10 38 31 / 0.32);
    --shadow-menu: 0 18px 40px -24px rgb(10 38 31 / 0.28);
}

/* ---- public shell ------------------------------------------------------ */

[data-theme="mint"] .mint-public-nav {
    background: rgb(var(--color-paper-raised) / 0.94);
    backdrop-filter: blur(16px);
}

[data-theme="mint"] .mint-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

[data-theme="mint"] .mint-hero::before {
    content: "";
    position: absolute;
    inset-inline-end: -10%;
    top: -35%;
    width: 54rem;
    height: 54rem;
    border-radius: 9999px;
    z-index: -2;
    background: rgb(var(--color-amber) / 0.11);
    pointer-events: none;
}

[data-theme="mint"] .mint-hero::after {
    content: "";
    position: absolute;
    inset-inline-start: -8rem;
    bottom: -14rem;
    width: 28rem;
    height: 28rem;
    border-radius: 9999px;
    z-index: -2;
    background: rgb(var(--color-coral) / 0.07);
    pointer-events: none;
}

[data-theme="mint"] .mint-try-card {
    box-shadow: 0 28px 70px -34px rgb(10 38 31 / 0.35);
}

[data-theme="mint"] .mint-step {
    transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="mint"] .mint-step:hover {
    border-color: rgb(var(--color-amber-border));
    transform: translateY(-2px);
}

[data-theme="mint"] .mint-api-card {
    background: rgb(var(--color-graphite));
    color: rgb(var(--color-graphite-ink));
}

[data-theme="mint"] .mint-bottom-nav {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* ---- workspace --------------------------------------------------------- */

[data-theme="mint"] .mint-app-shell {
    background: rgb(var(--color-paper));
}

[data-theme="mint"] .mint-app-header {
    background: rgb(var(--color-paper-raised) / 0.94);
    backdrop-filter: blur(16px);
}

/* The Studio is intentionally one column in Mint: script, engine, voice,
   then the quota/support rail. A simpler reading order with fewer choices
   visible at once. */
[data-theme="mint"] [data-studio-grid] {
    grid-template-columns: minmax(0, 1fr);
}

[data-theme="mint"] [data-studio-grid] > :last-child {
    display: grid;
    gap: 1.5rem;
}

[data-theme="mint"] .mint-quick-card {
    background:
        radial-gradient(circle at 90% 10%, rgb(var(--color-amber) / 0.22), transparent 45%),
        rgb(var(--color-paper-raised));
}

[data-theme="mint"] .mint-soft-panel {
    background: rgb(var(--color-amber-wash));
}

/* Functional coral text and destructive actions use the deeper coral. */
[data-theme="mint"] .text-coral,
[data-theme="mint"] .field-error,
[data-theme="mint"] .badge-coral {
    color: rgb(var(--color-coral-strong));
}

[data-theme="mint"] .btn-danger {
    border-color: rgb(var(--color-coral-strong));
    background-color: rgb(var(--color-coral-strong));
}

[data-theme="mint"] .btn-danger:hover {
    background-color: #992d18;
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="mint"] .mint-public-nav,
    [data-theme="mint"] .mint-app-header {
        backdrop-filter: none;
    }

    [data-theme="mint"] .mint-step:hover {
        transform: none;
    }
}


/* ---- workspace sidebar ------------------------------------------------ */

[data-theme="mint"] .mint-sidebar {
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="mint"] .mint-sidebar.is-open {
    transform: translateX(0);
}

[dir="rtl"][data-theme="mint"] .mint-sidebar {
    transform: translateX(100%);
}

[dir="rtl"][data-theme="mint"] .mint-sidebar.is-open {
    transform: translateX(0);
}

@media (min-width: 1024px) {
    [data-theme="mint"] .mint-sidebar {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="mint"] .mint-sidebar {
        transition: none;
    }
}