/* ==========================================================================
   NPIAC theme: the single source of colour for the NPIAC site and for
   Misinformation Scout (which loads this same file).

   To change the look, edit the PALETTE block. Everything else is derived
   from it. Two places cannot read CSS variables and hold copies of the
   palette, so update them by hand if you change these colours:
     - <meta name="theme-color"> in npiac/index.html and
       MisinformationScout/src/misinformation_scout/web/*.html
   The logo and icons are images in npiac/brand/ (made from "N-piac-lens logo.png").
   ========================================================================== */

:root {
  /* ---------- PALETTE ---------- */
  --deep-teal: #0B4F4A;
  --secondary-teal: #18756C;
  --dark-teal: #073A37;
  --mint: #EAF4F1;
  --pale-mint: #D6E9E4;
  --gold: #D3A13B;
  --pale-gold: #F7F0DE;
  --warm-paper: #FBFCFA;
  --ink-base: #1D2A33;
  --mid-gray: #607078;
  --rule-gray: #D8E0DE;
  --white: #FFFFFF;

  /* ---------- Surfaces and text ---------- */
  --paper: var(--warm-paper);
  --sheet: var(--white);
  --sunk: var(--mint);
  --sunk-strong: var(--pale-mint);
  --ink: var(--ink-base);
  --ink-soft: color-mix(in srgb, var(--ink-base) 76%, var(--mid-gray));
  --slate: var(--mid-gray);
  --rule: var(--rule-gray);
  --rule-strong: color-mix(in srgb, var(--rule-gray) 55%, var(--mid-gray));
  --on-ink: var(--white);
  --grid: color-mix(in srgb, var(--ink-base) 5%, transparent);

  /* ---------- Brand ---------- */
  --brand: var(--deep-teal);
  --brand-2: var(--secondary-teal);
  --brand-deep: var(--dark-teal);
  --accent: var(--gold);
  --accent-soft: var(--pale-gold);
  --primary: var(--deep-teal);          /* main buttons, active filters */
  --primary-hover: var(--secondary-teal);
  --on-primary: var(--white);
  --brand-strip: linear-gradient(90deg, var(--dark-teal), var(--deep-teal) 30%, var(--secondary-teal) 62%, var(--gold));

  /* Dark bands: home hero, footer, sign-in page. */
  --hero: var(--deep-teal);
  --hero-2: var(--secondary-teal);
  --hero-deep: var(--dark-teal);
  --hero-ink: var(--white);
  --hero-soft: color-mix(in srgb, var(--white) 80%, transparent);
  --hero-muted: color-mix(in srgb, var(--white) 78%, var(--mid-gray));   /* light gray that reads on the dark bands */

  /* Shadows are tinted with the darkest brand colour. */
  --shadow-ink: var(--dark-teal);
  --lift: 0 1px 2px color-mix(in srgb, var(--shadow-ink) 5%, transparent), 0 18px 46px -30px color-mix(in srgb, var(--shadow-ink) 42%, transparent);
  --lift-high: 0 2px 4px color-mix(in srgb, var(--shadow-ink) 6%, transparent), 0 28px 72px -34px color-mix(in srgb, var(--shadow-ink) 46%, transparent);
  --stamp-blend: multiply;
  --radius: 14px;

  /* ---------- Verdicts and statuses ----------
     Kept semantic (green, amber, red, blue, grey) so a verdict never reads as
     brand decoration. Always shown with a text label. */
  --verified: #1C7A4E;
  --misleading: #9A6A0B;
  --false: #B3261E;
  --investigating: #2757C6;
  --unverified: var(--mid-gray);
  --on-solid: var(--white);

  /* ---------- Categorical accents ----------
     Distinguish sectors, report covers and process steps. Teal and gold come
     from the palette; the rest stay distinct so categories remain tellable apart. */
  --c-red: #B85A52;
  --c-orange: #CB8A4E;
  --c-yellow: var(--gold);
  --c-green: #3D8565;
  --c-teal: var(--secondary-teal);
  --c-blue: #4A68A8;
  --c-berry: #9A5573;
  --c-violet: #6E62A0;
  --tile-ink: var(--ink-base);

  /* ---------- Type ---------- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* ---------- Dark mode: derived from the palette ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: color-mix(in srgb, var(--dark-teal) 30%, #050A0A);
    --sheet: color-mix(in srgb, var(--dark-teal) 48%, #0A1212);
    --sunk: color-mix(in srgb, var(--dark-teal) 22%, #030606);
    --sunk-strong: color-mix(in srgb, var(--dark-teal) 60%, #0A1212);
    --ink: var(--mint);
    --ink-soft: color-mix(in srgb, var(--pale-mint) 78%, var(--mid-gray));
    --slate: color-mix(in srgb, var(--mid-gray) 55%, var(--pale-mint));
    --rule: color-mix(in srgb, var(--mint) 12%, transparent);
    --rule-strong: color-mix(in srgb, var(--mint) 24%, transparent);
    --on-ink: color-mix(in srgb, var(--dark-teal) 30%, #050A0A);
    --grid: color-mix(in srgb, var(--mint) 5%, transparent);
    --primary: var(--secondary-teal);
    --primary-hover: color-mix(in srgb, var(--secondary-teal) 75%, var(--mint));
    --hero: var(--dark-teal);
    --hero-2: var(--deep-teal);
    --hero-deep: color-mix(in srgb, var(--dark-teal) 60%, #000);
    --shadow-ink: #000;
    --lift: 0 1px 0 rgba(0, 0, 0, .3), 0 22px 44px -22px rgba(0, 0, 0, .75);
    --lift-high: 0 2px 4px rgba(0, 0, 0, .26), 0 30px 72px -30px rgba(0, 0, 0, .82);
    --stamp-blend: normal;
    --verified: #5CC08F;
    --misleading: #E3B455;
    --false: #EE7F77;
    --investigating: #7FA6EE;
    --unverified: color-mix(in srgb, var(--mid-gray) 55%, var(--pale-mint));
    --on-solid: color-mix(in srgb, var(--dark-teal) 30%, #050A0A);
    --tile-ink: var(--ink-base);
  }
}
:root[data-theme="dark"] {
  --paper: color-mix(in srgb, var(--dark-teal) 30%, #050A0A);
  --sheet: color-mix(in srgb, var(--dark-teal) 48%, #0A1212);
  --sunk: color-mix(in srgb, var(--dark-teal) 22%, #030606);
  --sunk-strong: color-mix(in srgb, var(--dark-teal) 60%, #0A1212);
  --ink: var(--mint);
  --ink-soft: color-mix(in srgb, var(--pale-mint) 78%, var(--mid-gray));
  --slate: color-mix(in srgb, var(--mid-gray) 55%, var(--pale-mint));
  --rule: color-mix(in srgb, var(--mint) 12%, transparent);
  --rule-strong: color-mix(in srgb, var(--mint) 24%, transparent);
  --on-ink: color-mix(in srgb, var(--dark-teal) 30%, #050A0A);
  --grid: color-mix(in srgb, var(--mint) 5%, transparent);
  --primary: var(--secondary-teal);
  --primary-hover: color-mix(in srgb, var(--secondary-teal) 75%, var(--mint));
  --hero: var(--dark-teal);
  --hero-2: var(--deep-teal);
  --hero-deep: color-mix(in srgb, var(--dark-teal) 60%, #000);
  --shadow-ink: #000;
  --lift: 0 1px 0 rgba(0, 0, 0, .3), 0 22px 44px -22px rgba(0, 0, 0, .75);
  --lift-high: 0 2px 4px rgba(0, 0, 0, .26), 0 30px 72px -30px rgba(0, 0, 0, .82);
  --stamp-blend: normal;
  --verified: #5CC08F;
  --misleading: #E3B455;
  --false: #EE7F77;
  --investigating: #7FA6EE;
  --unverified: color-mix(in srgb, var(--mid-gray) 55%, var(--pale-mint));
  --on-solid: color-mix(in srgb, var(--dark-teal) 30%, #050A0A);
  --tile-ink: var(--ink-base);
}