/* Shared design tokens for mobile-reader.
   Colors/fonts ported from website/account.html's :root block; caption font
   stacks ported from browser-plugin/defaults.js's FONT_STACKS. Keeping these
   in one file (rather than copy-pasted per page, which is what website/
   currently does across account.html/pricing.html/etc.) is a deliberate fix
   for the duplication problem noted in docs/mobile-viewer-client-design.md §3
   — this file is meant to be the one mobile-reader itself draws from, not a
   second independent copy. */

:root {
    --ink: #0A1420;
    --ink-2: #0D1C2B;
    --panel: #102436;
    --panel-2: #132A3F;
    --teal: #3FE0C5;
    --teal-deep: #12594A;
    --coral: #FF6F86;
    --amber: #FFC65C;
    --fish: #FF8A3D;
    --text: #EAF3F2;
    --muted: #7E96A2;
    --hair: rgba(234, 243, 242, 0.09);

    --font-display: 'Unbounded', sans-serif;
    --font-body: 'Manrope', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Caption defaults — mirrors browser-plugin/defaults.js's STYLE object,
       so a viewer sees the same look here as in the browser extension.
       Background alpha isn't a fixed token here (unlike the extension) —
       it's user-editable, see css/captions.css's --bs-bg-alpha instead. */
    --caption-font: Arial, 'Helvetica Neue', Helvetica, 'Liberation Sans', sans-serif;
    --caption-color: #ffffff;
    --caption-color-partial: #cccccc;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background:
        radial-gradient(ellipse 900px 500px at 18% -10%, rgba(63, 224, 197, 0.14), transparent 60%),
        radial-gradient(ellipse 700px 500px at 85% 10%, rgba(255, 111, 134, 0.10), transparent 55%),
        var(--ink);
    color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh;
}

a { color: var(--teal); }

.btn-primary {
    background: var(--amber);
    color: var(--ink-2);
    border: 0;
    border-radius: 10px;
    padding: 13px 22px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}
.btn-primary:disabled { opacity: 0.5; cursor: default; }

.btn-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--hair);
    border-radius: 10px;
    padding: 12px 20px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.btn-secondary:hover { border-color: var(--teal); color: var(--teal); }