/* Toolbox Design System
 * ─────────────────────
 * Single source of truth for design tokens, layout primitives, and
 * responsive behavior. Every page in the Toolbox suite (landing,
 * transcriber, image-studio, admin, setup, auth) links this stylesheet
 * so any visual change lands once and propagates everywhere. New tools
 * should inherit from these classes rather than redefining them.
 *
 * Contents
 *   1. Design tokens (light + dark palette)
 *   2. Reset + base (box-sizing, body, iOS text-size-adjust, tap-highlight)
 *   3. Typography
 *   4. Layout primitives (.container, .wrap, .card)
 *   5. Top navigation (.topnav family + .theme-toggle)
 *   6. Buttons (.btn-primary, .btn-secondary, .btn-icon, .btn-sm, .btn-danger-ghost)
 *   7. Form primitives (.field-label, .field-select, inputs, textareas)
 *   8. Tool hero (.tool-hero family)
 *   9. Notices (.notice, .notice-ok, .notice-warn, .notice-error)
 *  10. Utilities (.hidden, .muted, .rtl-content, sr-only, safe-area insets)
 *  11. Focus-visible + reduced motion + print
 *  12. Responsive breakpoints (tablet ≤768, mobile ≤640, narrow ≤360)
 */


/* ─── 1. Tokens ────────────────────────────────────────────────────────── */

:root {
    color-scheme: light;

    /* Surfaces — inverted from the old slate-50 / pure-white pairing.
       Body is now pure paper, surface is the subtle tint. Cards become
       geometry (1px border) rather than floating chips, in line with
       the Linear / Vercel / Stripe palette family. */
    --bg-body: #ffffff;
    --bg-surface: #fafafa;
    --bg-surface-alt: #f5f5f5;
    --bg-hover: #f0f0f1;

    /* Text — neutral zinc ramp, no blue cast. */
    --text-primary: #0a0a0b;
    --text-secondary: #52525b;
    --text-muted: #a1a1aa;

    /* Borders — neutral, no blue. */
    --border: #e4e4e7;
    --border-strong: #d4d4d8;
    --border-light: #f1f1f3;

    /* Accent — signature indigo-violet. Distinct from the generic
       Tailwind blue-500 that was here before; close to the family of
       Linear (#5E6AD2) and Stripe (#635BFF) without being a copy. */
    --accent: #5b5bd6;
    --accent-hover: #4848c4;
    --accent-bg: #e8e8fb;
    --accent-text: #4848c4;
    --accent-soft: rgba(91, 91, 214, 0.08);
    --accent-glow: rgba(91, 91, 214, 0.14);

    /* Semantic — kept distinct from the brand accent so status colors
       remain readable as status. */
    --ok-bg: #f0fdf4;
    --ok-border: #bbf7d0;
    --ok-text: #166534;
    --info-bg: #eff6ff;
    --info-border: #bfdbfe;
    --info-text: #1e40af;
    --warn-bg: #fffbeb;
    --warn-border: #fde68a;
    --warn-text: #92400e;
    --error-bg: #fef2f2;
    --error-border: #fecaca;
    --error-text: #dc2626;
    --danger: #dc2626;
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;
    --disabled: #a1a1aa;

    /* Hero backdrop — radial glow used on landing / setup pages, in the
       new accent's hue. */
    --hero-grad: radial-gradient(1200px 420px at 50% -10%, rgba(91, 91, 214, 0.10), transparent 60%);

    /* Elevation — subtle by default; heavier variants used for hover */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 12px -4px rgba(10, 10, 11, 0.08);
    --shadow-lg: 0 12px 32px -12px var(--accent-glow);

    /* Radius + spacing (scale multiples of 4px) */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* Touch target baseline — meets iOS/Android guidelines. */
    --touch-min: 40px;
    --touch-primary: 44px;

    /* Heading face — Geist is loaded alongside Inter on every page so
       headlines pick up its tighter, more confident metrics without a
       body-font swap. Falls back to Inter / system-ui cleanly. */
    --font-heading: 'Geist', 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                    'Segoe UI', Roboto, sans-serif;
}

[data-theme="dark"] {
    color-scheme: dark;

    /* Dark surfaces — true neutral, no cool blue cast. The previous
       #0b0d13 / #151822 pair read as "2018 dev tools" because of the
       blue undertone; this is the Linear / Vercel near-black ramp. */
    --bg-body: #0a0a0b;
    --bg-surface: #161618;
    --bg-surface-alt: #1c1c1f;
    --bg-hover: #222226;

    --text-primary: #f3f3f5;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;

    --border: #27272a;
    --border-strong: #3f3f46;
    --border-light: #18181b;

    --accent: #7c7cf0;
    --accent-hover: #9595f5;
    --accent-bg: rgba(124, 124, 240, 0.18);
    --accent-text: #9595f5;
    --accent-soft: rgba(124, 124, 240, 0.14);
    --accent-glow: rgba(124, 124, 240, 0.28);

    --ok-bg: #0f2a1a;
    --ok-border: #1f5c3a;
    --ok-text: #6ee7b7;
    --info-bg: #1e3a5f;
    --info-border: #2d4a6f;
    --info-text: #93c5fd;
    --warn-bg: #3d2e0f;
    --warn-border: #5c4a1f;
    --warn-text: #fcd34d;
    --error-bg: #2d1b1b;
    --error-border: #5c2d2d;
    --error-text: #fca5a5;
    --danger: #f87171;
    --danger-bg: #2d1b1b;
    --danger-border: #5c2d2d;
    --disabled: #52525b;

    --hero-grad: radial-gradient(1200px 500px at 50% -10%, rgba(124, 124, 240, 0.16), transparent 60%);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
}


/* ─── 2. Reset + base ─────────────────────────────────────────────────── */

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

html {
    /* Prevent iOS Safari from zooming the page when the device is
       rotated or when a user focuses an input with font < 16 px.
       Still allows manual zoom for accessibility. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Stable, predictable line-height baseline. */
    line-height: 1.5;
    /* Tell the browser we support both themes so native UI (scrollbars,
       form widgets) theme correctly. :root + [data-theme] narrow this. */
    color-scheme: light dark;
}

html,
body {
    min-height: 100vh;
}

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent unexpected horizontal scroll if any descendant violates
       its bounds — common footgun on mobile. */
    overflow-x: hidden;
    /* Remove the blue tap-highlight flash on mobile Safari / Chrome. */
    -webkit-tap-highlight-color: transparent;
}

/* RTL transcripts + summaries switch font family via this helper. */
.rtl-content {
    font-family: 'Vazirmatn', 'Inter', system-ui, -apple-system, sans-serif;
}

/* Media scales down instead of overflowing its container. */
img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
}

/* Prevent iOS double-tap-zoom delay on interactive elements. */
button,
a,
input[type="button"],
input[type="submit"],
[role="button"] {
    touch-action: manipulation;
}


/* ─── 3. Typography ───────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    /* Geist (Vercel's geometric sans) renders denser and more confident
       at large sizes than Inter; pages still load Inter for body text. */
    font-family: var(--font-heading);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.muted {
    color: var(--text-muted);
    font-size: 0.85rem;
}

code, pre, kbd, samp {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
                 Monaco, Consolas, 'Liberation Mono', monospace;
}


/* ─── 4. Layout primitives ───────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 2rem;
}

/* Wider wrap used on landing / setup to give the hero room to breathe. */
.wrap {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
}

.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}


/* ─── 5. Top navigation ──────────────────────────────────────────────── */

.topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    /* Honour iPhone notch / Dynamic Island safe areas without pushing
       the content off-centre on phones that don't have them. */
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
    padding-top: max(1rem, env(safe-area-inset-top));
    border-bottom: 1px solid var(--border);
    /* Frosted-glass effect. 12 px is the sweet spot: still visible as
       depth but ~4× cheaper than 24 px on every scroll frame (GPU
       Gaussian samples scale quadratically with the blur radius). */
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    position: sticky;
    top: 0;
    z-index: 10;
}

[data-theme="dark"] .topnav {
    background: rgba(10, 10, 11, 0.78);
}

/* Disable the backdrop-filter on mobile entirely — phone GPUs run it
   per scroll frame even when the page isn't moving, and the depth cue
   is less valuable on a small viewport. Fall back to a solid surface. */
@media (max-width: 640px) {
    .topnav {
        background: var(--bg-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.topnav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: inherit;
    font-weight: 700;
    letter-spacing: -0.01em;
    min-height: var(--touch-min);
}

.topnav-brand:hover {
    color: inherit;
}

.topnav-brand svg {
    width: 28px;
    height: 28px;
    display: block;
}

.topnav-brand span {
    font-size: 1.05rem;
}

.topnav-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.topnav-link,
.topnav-signout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    min-height: 36px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.topnav-link:hover,
.topnav-signout:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.topnav-signout {
    border-color: var(--border);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.theme-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
}

.icon-sun {
    display: none;
}

[data-theme="dark"] .icon-moon {
    display: none;
}

[data-theme="dark"] .icon-sun {
    display: block;
}


/* ─── 6. Buttons ─────────────────────────────────────────────────────── */

.btn-primary,
.btn-secondary,
.btn-icon,
.btn-sm,
.btn-danger-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-family: inherit;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s,
                transform 0.05s;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary:active,
.btn-secondary:active,
.btn-icon:active {
    transform: translateY(1px);
}

.btn-primary {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    min-height: var(--touch-primary);
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-primary:disabled {
    background: var(--disabled);
    border-color: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
}

.btn-secondary {
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    min-height: var(--touch-min);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

.btn-secondary:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.btn-icon {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    min-height: 36px;
}

.btn-icon:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-icon.btn-delete:hover {
    color: var(--error-text);
    border-color: var(--error-border);
}

.btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    min-height: 36px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-sm:hover {
    background: var(--bg-hover);
}

.btn-danger-ghost {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger-border);
    min-height: var(--touch-min);
}

.btn-danger-ghost:hover {
    background: var(--danger-bg);
}


/* ─── 7. Form primitives ─────────────────────────────────────────────── */

.field-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

/* Inputs, textareas, selects share styling so they align in a form. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="file"],
textarea,
select,
.field-select {
    font-family: inherit;
    /* 16 px on mobile prevents iOS Safari from auto-zooming when the
       user taps into the field. Desktop drops to 0.95rem via the
       media query below. */
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.75rem;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}

textarea {
    line-height: 1.55;
    resize: vertical;
    min-height: 80px;
}

input:focus,
textarea:focus,
select:focus,
.field-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Compact select used in inline toolbars (e.g. translation targets). */
.field-select {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    min-width: 8rem;
}


/* ─── 8. Tool hero ───────────────────────────────────────────────────── */
/*
 * Left-aligned + compact. Linear / Notion / Raycast all skip the giant
 * centered icon-in-blue-square; the *work surface* should be the hero,
 * not the page title. Icon is small enough to be a visual cue, not the
 * focal point.
 */

.tool-hero {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.25rem 0 1.5rem;
    background: transparent;
}

.tool-hero-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: #fff;
}

.tool-hero-icon svg {
    width: 22px;
    height: 22px;
}

.tool-hero-text {
    min-width: 0;
    flex: 1;
}

.tool-hero h1 {
    font-size: clamp(1.35rem, 2.5vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.15rem;
}

.tool-hero-sub {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 40rem;
}


/* ─── 9. Notices ─────────────────────────────────────────────────────── */

.notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 1rem 0;
}

.notice-ok {
    background: var(--ok-bg);
    border: 1px solid var(--ok-border);
    color: var(--ok-text);
}

.notice-info {
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    color: var(--info-text);
}

.notice-warn {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    color: var(--warn-text);
}

.notice-error {
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error-text);
}


/* ─── 10. Utilities ──────────────────────────────────────────────────── */

.hidden {
    display: none !important;
}

/* Screen-reader-only content (accessible headings, labels on icon-only
   buttons). Visually hidden but announced by assistive tech. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ─── 11. Accessibility + print ──────────────────────────────────────── */

/* Give keyboard users a clear focus ring without bothering mouse users. */
:focus:not(:focus-visible) {
    outline: none;
}

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

/* Honour OS-level reduced-motion preference — disable all transitions
   and non-essential animations. Scroll-behavior also becomes instant. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .topnav,
    .topnav-actions,
    .btn-primary,
    .btn-secondary,
    .btn-icon {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }
}


/* ─── 12. Responsive breakpoints ─────────────────────────────────────── */

/* ── Tablet / small laptop ── */
@media (max-width: 768px) {
    .container {
        padding: 2.25rem 1.25rem 1.75rem;
    }

    .wrap {
        padding: 2.5rem 1.25rem 1.75rem;
    }
}


/* ── Mobile (primary breakpoint for every tool) ── */
@media (max-width: 640px) {
    .topnav {
        padding: 0.85rem 1rem;
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .topnav-brand svg {
        width: 26px;
        height: 26px;
    }

    .topnav-brand span {
        font-size: 0.95rem;
    }

    .topnav-link,
    .topnav-signout {
        padding: 0.35rem 0.55rem;
        font-size: 0.8rem;
        min-height: 36px;
    }

    .container,
    .wrap {
        padding: 2rem 1rem 1.5rem;
    }

    .card {
        padding: 1.1rem;
    }

    /* Tool hero on mobile is deliberately minimal: users are here to
       USE the tool, not read its description. The longer subtitle and
       storage meter are hidden to keep the primary action (upload,
       generate, etc.) above the fold. The storage meter still lives
       on the page at the quota panel / history row level, so no
       information is actually lost — just deprioritised. */
    .tool-hero {
        padding: 0.75rem 0 1rem;
        gap: 0.7rem;
    }

    .tool-hero-icon {
        width: 36px;
        height: 36px;
    }

    .tool-hero-icon svg {
        width: 20px;
        height: 20px;
    }

    .tool-hero h1 {
        font-size: 1.25rem;
    }

    .tool-hero-sub,
    .storage-meter {
        display: none;
    }
}


/* ── Narrow mobile (≤360 px — older iPhones, small Android) ── */
@media (max-width: 360px) {
    .container,
    .wrap {
        padding: 1.5rem 0.85rem 1.25rem;
    }

    .topnav-brand span {
        font-size: 0.9rem;
    }

    .card {
        padding: 0.95rem;
    }

    .btn-primary {
        padding: 0.75rem 0.9rem;
        font-size: 0.95rem;
    }

    .btn-secondary {
        padding: 0.5rem 0.8rem;
        font-size: 0.85rem;
    }

    .tool-hero-sub {
        font-size: 0.9rem;
    }
}


/* Desktop typography — drop input/textarea/select font from 16 px
   to 0.95 rem so forms don't look oversized on large screens. */
@media (min-width: 641px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="file"],
    textarea,
    select,
    .field-select {
        font-size: 0.95rem;
    }
}