/* ─────────────────────────────────────────────────────────────────────────
 * streamline-theme.css — shared design tokens for legacy static HTML pages.
 *
 * Mirrors the tailwind tokens in web/tailwind.config.js (copied verbatim
 * from streamline). Legacy pages that previously defined their own dark
 * :root variables can drop the block and link this file instead — the
 * variable names (--bg, --surface, --border, --accent, --text, etc.) are
 * preserved, but now resolve to streamline's light "paper" palette.
 *
 * Fonts are served by the Next.js app under /fonts/ (Vercel filesystem
 * handle picks them up before falling through to Flask). Locally, hit
 * pages via :3000 (Next dev) so the proxy resolves /fonts/ to Next.
 * ───────────────────────────────────────────────────────────────────── */

:root {
    /* Streamline core tokens (subset — the ones legacy pages actually use) */
    --streampaper:    rgba(250, 247, 244, 1);
    --streampaper-50: rgba(250, 247, 244, 0.5);
    --streamgrey-100: rgba(4, 33, 28, 1);
    --streamgrey-80:  rgba(4, 33, 28, 0.8);
    --streamgrey-70:  rgba(4, 33, 28, 0.7);
    --streamgrey-60:  rgba(4, 33, 28, 0.6);
    --streamgrey-50:  rgba(4, 33, 28, 0.5);
    --streamgrey-40:  rgba(4, 33, 28, 0.4);
    --streamgrey-20:  rgba(4, 33, 28, 0.2);
    --streamgrey-12:  rgba(4, 33, 28, 0.12);
    --streamgrey-8:   rgba(4, 33, 28, 0.08);
    --streamgrey-6:   rgba(4, 33, 28, 0.06);
    --streamgrey-4:   rgba(4, 33, 28, 0.04);
    --streampurple:        rgba(114, 9, 183, 1);
    --streampurple-80:     rgba(114, 9, 183, 0.8);
    --streampurple-40:     rgba(114, 9, 183, 0.4);
    --streampurple-16:     rgba(114, 9, 183, 0.16);
    --streampurple-8:      rgba(114, 9, 183, 0.08);
    --streampurple-4:      rgba(114, 9, 183, 0.04);
    --streamhotpink:       rgba(217, 47, 227, 1);
    --streamhotpink-16:    rgba(217, 47, 227, 0.16);
    --streampinkpurple:    rgba(181, 23, 158, 1);
    --streampinkpurple-4:  rgba(181, 23, 158, 0.04);
    --streamemerald:       rgba(86, 153, 129, 1);
    --streamemerald-16:    rgba(86, 153, 129, 0.16);
    --streamemeraldmid:    rgba(50, 121, 103, 1);
    --streamprettygreen-8: rgba(183, 239, 187, 0.08);
    --streambrightyellow:  rgba(255, 214, 10, 1);
    --streamred:           rgba(255, 0, 0, 1);

    /* Aliases — match the variable names used by the legacy reports so
     * their internal `var(--bg)`, `var(--accent)`, etc. continue to work. */
    --bg:       var(--streampaper);
    --surface:  #ffffff;
    --surface2: rgba(255, 255, 255, 0.6);
    --border:   var(--streamgrey-12);
    --accent:   var(--streampurple);
    --accent2:  var(--streamhotpink);
    --green:    var(--streamemeraldmid);
    --red:      var(--streamred);
    --yellow:   var(--streambrightyellow);
    --text:     var(--streamgrey-100);
    --muted:    var(--streamgrey-60);
    --label:    var(--streamgrey-70);

    /* Typography */
    --serif: Georgia, 'Times New Roman', serif;
    --sans:  'SF Pro', 'Calibri', ui-sans-serif, system-ui, -apple-system,
             BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
             sans-serif;
    --mono:  'SF Mono', 'Fira Code', Consolas, monospace;

    --radius: 0.5rem;
}

/* Base — same paper background that web/_document.tsx uses. */
html { background: var(--streampaper); min-height: 100%; }
body {
    background: var(--streampaper);
    color: var(--streamgrey-100);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

/* Streamline signature multi-layer shadows. */
.realistic-shadow-purple {
    box-shadow:
        0px 1px 1px -0.5px rgba(114, 9, 183, 0.08),
        0px 4px 4px -1.5px rgba(114, 9, 183, 0.08),
        0px 6px 6px -3px rgba(114, 9, 183, 0.08),
        0px 12px 12px -6px rgba(114, 9, 183, 0.08),
        0px 24px 24px -12px rgba(114, 9, 183, 0.08),
        0px 12px 32px -32px rgba(114, 9, 183, 0.08);
}
.realistic-shadow-paper {
    box-shadow:
        0px 1px 1px -0.5px rgba(75, 55, 34, 0.08),
        0px 4px 4px -1.5px rgba(75, 55, 34, 0.08),
        0px 6px 6px -3px rgba(75, 55, 34, 0.08),
        0px 12px 12px -6px rgba(75, 55, 34, 0.08),
        0px 24px 24px -12px rgba(75, 55, 34, 0.08),
        0px 12px 32px -32px rgba(75, 55, 34, 0.08);
}
.realistic-shadow-grey {
    box-shadow:
        0px 1px 1px -0.5px rgba(4, 33, 28, 0.08),
        0px 4px 4px -1.5px rgba(4, 33, 28, 0.08),
        0px 6px 6px -3px rgba(4, 33, 28, 0.08),
        0px 12px 12px -6px rgba(4, 33, 28, 0.08),
        0px 24px 24px -12px rgba(4, 33, 28, 0.08),
        0px 12px 32px -32px rgba(4, 33, 28, 0.08);
}

/* ── SF Pro Text ─────────────────────────────────────────────────────── */
@font-face {
    font-family: 'SF Pro';
    src: url('/fonts/sf-pro/SF-Pro-Text-Light.otf') format('opentype');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'SF Pro';
    src: url('/fonts/sf-pro/SF-Pro-Text-Regular.otf') format('opentype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'SF Pro';
    src: url('/fonts/sf-pro/SF-Pro-Text-RegularItalic.otf') format('opentype');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'SF Pro';
    src: url('/fonts/sf-pro/SF-Pro-Text-Medium.otf') format('opentype');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'SF Pro';
    src: url('/fonts/sf-pro/SF-Pro-Text-Semibold.otf') format('opentype');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'SF Pro';
    src: url('/fonts/sf-pro/SF-Pro-Text-Bold.otf') format('opentype');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ── SF Pro Display ──────────────────────────────────────────────────── */
@font-face {
    font-family: 'SF Pro Display';
    src: url('/fonts/sf-pro/SF-Pro-Display-Regular.otf') format('opentype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('/fonts/sf-pro/SF-Pro-Display-Medium.otf') format('opentype');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('/fonts/sf-pro/SF-Pro-Display-Semibold.otf') format('opentype');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('/fonts/sf-pro/SF-Pro-Display-Bold.otf') format('opentype');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ── Calibri fallback ────────────────────────────────────────────────── */
@font-face {
    font-family: 'Calibri';
    src: url('/fonts/calibri.ttf') format('truetype');
    font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Calibri';
    src: url('/fonts/calibrib.ttf') format('truetype');
    font-weight: bold; font-style: normal; font-display: swap;
}