/* ============================================================================
   Clear Asset theme  ·  v2.0
   The ClearAsset design system.

   The look: navy-dominant, white content canvas, blue as the primary accent,
   amber as the single call-to-action, green/red for risk semantics. Montserrat
   for impact, Lato for reading, JetBrains Mono for data/labels. Soft rounded
   cards. LIGHT is the default; a navy dark variant is available via the toggle.

   USAGE
     <link rel="stylesheet" href="theme.css">
   Light is the default. For the dark variant put EITHER on <html>:
     <html class="theme-dark">      or      <html data-theme="dark">
   Consume tokens anywhere as CSS variables:
     background: var(--surface);  color: var(--ivory);  border: 1px solid var(--border);
   Token NAMES are inherited from the prior theme for drop-in compatibility, so
   e.g. --ivory now holds "ink on white", and --gold now holds the blue accent.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800;900&family=Lato:wght@400;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Light (default) ─────────────────────────────────────────────────────── */
:root {
  /* Surfaces — bg is the page canvas; surface→surf3 step up off it */
  --bg:       #F5F9FF;   /* ice page canvas               */
  --surface:  #FFFFFF;   /* primary card / panel          */
  --surf2:    #F5F9FF;   /* nested surface                */
  --surf3:    #E6F2FF;   /* highest surface (popovers)    */

  /* Borders */
  --border:   #E6EDF5;   /* hairline divider              */
  --border2:  #CFE0F5;   /* clear card edge / hover       */
  --card-outline: #8FAACB; /* deal-card edge: must read as a card at a glance */

  /* Text ramp */
  --ivory:    #0B1F33;   /* primary text (ink)            */
  --ivory2:   #33475B;   /* muted / secondary             */
  --ivory3:   #566274;   /* faint / captions — 5.9:1 on the canvas */

  /* Blue — PRIMARY accent (buttons, links, active nav, eyebrows) */
  --gold:     #0052CC;   /* primary accent (blue-deep)    */
  --gold2:    #4A90E2;   /* lighter — hovers / glints     */
  --gold-dim: #B8D4FF;   /* subtle — borders / tints      */
  --on-gold:  #FFFFFF;   /* text that sits on the accent  */

  /* Navy — SECONDARY accent, and a supporting teal for analytics */
  --teal:     #22676E;
  --sky:      #4A90E2;   /* lightest blue — soft accent   */

  /* Status (theme-stable across light/dark) */
  --green:    #10B981;   --green-dim: #D1FAE5;
  --amber:    #F59E0B;   --amber-dim: #FEF3C7;
  --red:      #EF4444;   --red-dim:   #FEE2E2;

  /* Ink variants — the status hues as TEXT. The fills above are too light to
     read at caption size on a pale surface (amber on its tint is 1.8:1), so
     text uses these; borders, dots and fills keep the status colour. Every
     pair clears 4.5:1 on the page, a card and its own tint, in both themes. */
  --green-ink:  #047857;
  --amber-ink:  #9A4608;
  --red-ink:    #B91C1C;
  --violet-ink: #5B3FD6;
  --accent-ink: #0052CC;   /* the primary accent as text */

  /* Status / accent tints — pills, tags, banners */
  --gold-bg:  rgba(74,144,226,0.12);   /* primary-accent pill tint */
  --green-bg: rgba(16,185,129,0.12);
  --amber-bg: rgba(245,158,11,0.14);
  --red-bg:   rgba(239,68,68,0.10);

  /* Radii */
  --radius-card:    14px;   /* cards, modals      */
  --radius-control: 8px;    /* buttons, inputs    */
  --radius-pill:    999px;  /* pills, chips       */

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(11,31,51,.08);
  --shadow-lift: 0 8px 24px rgba(11,31,51,.12);

  /* Typography */
  --font-head: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-sans: 'Lato', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  color-scheme: light;
}

/* ── Dark variant — navy canvas, brighter blue accent ────────────────────── */
.theme-dark,
:root[data-theme="dark"] {
  --bg:       #071A2F;   /* deep navy-black */
  --surface:  #0B2540;
  --surf2:    #0E2C4D;
  --surf3:    #123457;
  --border:   #1C3A5C;
  --border2:  #2A4A70;
  --card-outline: #5A88BA;
  --ivory:    #EAF2FB;
  --ivory2:   #A9C2DE;
  --ivory3:   #8AA4C2;   /* 6.0:1 on a card — was 4.4 */
  --gold:     #4A90E2;   /* blue reads brighter on navy */
  --gold2:    #7FB0EC;
  --gold-dim: #2A4A70;
  --on-gold:  #04121F;
  --teal:     #5FB4BB;
  --sky:      #7FB0EC;
  --green-dim: #0D3D2A;
  --amber-dim: #3D2800;
  --red-dim:   #3D0F0F;
  --green-ink:  #34D399;
  --amber-ink:  #FBBF24;
  --red-ink:    #F87171;
  --violet-ink: #A78BFA;
  --accent-ink: #7FB0EC;   /* --gold is 3.7:1 on a tinted chip in dark */
  --gold-bg:  rgba(74,144,226,0.16);
  --green-bg: rgba(16,185,129,0.14);
  --amber-bg: rgba(245,158,11,0.14);
  --red-bg:   rgba(239,68,68,0.12);
  --shadow-card: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.28);
  --shadow-lift: 0 8px 24px rgba(0,0,0,.40);
  color-scheme: dark;
}

/* ── Base element styling (optional but recommended) ─────────────────────── */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}
h1, h2, h3 { font-family: var(--font-head); letter-spacing: -0.02em; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surf2); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }

::selection { background: var(--gold-bg); }

/* ── Signature scanline texture — opt in: add class="wp-scanlines" to body ── */
.wp-scanlines { position: relative; }
.wp-scanlines::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px);
}
.theme-dark .wp-scanlines::before,
:root[data-theme="dark"] .wp-scanlines::before { opacity: 0.5; }

/* ── Motion — the animation set + ready-to-use utility classes ───────────── */
@keyframes wp-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wp-blink   { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes wp-pulse   { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes wp-spin    { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.wp-fade-up   { animation: wp-fade-up 0.45s ease both; }
.wp-fade-up-1 { animation-delay: 0.05s; }
.wp-fade-up-2 { animation-delay: 0.12s; }
.wp-fade-up-3 { animation-delay: 0.20s; }
.wp-pulse     { animation: wp-pulse 2s ease-in-out infinite; }
.wp-spin      { animation: wp-spin 0.8s linear infinite; }

/* ── A few composed helpers so the look is one class away ────────────────── */
.wp-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.wp-btn {
  font-family: var(--font-sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer;
  border: none; border-radius: var(--radius-control); padding: 9px 20px;
  background: var(--gold); color: var(--on-gold); box-shadow: var(--shadow-card);
  transition: filter .15s ease;
}
.wp-btn:hover { filter: brightness(1.06); }
.wp-btn-ghost {
  background: transparent; color: var(--ivory2);
  border: 1px solid var(--border2); box-shadow: none;
}
.wp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--gold-bg); color: var(--accent-ink);
}
.wp-mono { font-family: var(--font-mono); }

/* ── Print / PDF — paper is light-only ───────────────────────────────────────
   Printing (and "Save as PDF") is standardised to the LIGHT palette regardless
   of the on-screen theme, because ink-on-paper reads best on a white page.
   We re-declare the light tokens under @media print so a page rendered in dark
   mode still prints light, then strip screen-only chrome (shadows, scanlines,
   sticky UI) and set sensible page margins. Add class="wp-no-print" to anything
   that should be dropped from the printed/PDF output. */
@media print {
  :root,
  .theme-light,
  :root[data-theme="light"],
  .theme-dark,
  :root[data-theme="dark"] {
    --bg:       #ffffff;   /* force a true-white page for print */
    --surface:  #ffffff;
    --surf2:    #F5F9FF;
    --surf3:    #E6F2FF;
    --border:   #E6EDF5;
    --border2:  #CFE0F5;
    --card-outline: #8FAACB;
    --ivory:    #0B1F33;
    --ivory2:   #33475B;
    --ivory3:   #566274;
    --green-ink:  #047857;
    --amber-ink:  #9A4608;
    --red-ink:    #B91C1C;
    --violet-ink: #5B3FD6;
    --accent-ink: #0052CC;
    --gold:     #0052CC;
    --gold2:    #4A90E2;
    --gold-dim: #B8D4FF;
    --on-gold:  #FFFFFF;
    --teal:     #22676E;
    --sky:      #4A90E2;
    --shadow-card: none;
    --shadow-lift: none;
    color-scheme: light;
  }

  @page { margin: 18mm 16mm; }

  html, body {
    background: #ffffff !important;
    color: var(--ivory) !important;
  }

  body {
    -webkit-print-color-adjust: exact;   /* keep accents in print */
    print-color-adjust: exact;
  }

  /* Screen-only chrome that shouldn't reach paper */
  .wp-scanlines::before { display: none !important; }
  .wp-card { box-shadow: none !important; border: 1px solid var(--border) !important; }
  .wp-btn  { box-shadow: none !important; }
  .wp-no-print { display: none !important; }

  /* Avoid awkward breaks */
  h1, h2, h3 { break-after: avoid; }
  tr, .wp-card, blockquote, figure { break-inside: avoid; }
  a { color: var(--gold) !important; text-decoration: none; }
}