/*
 * Author: Navratan
 * Organization: Punjab National Bank
 * Project: DRISHTI-PQC
 */

/* ============================================================================
   app.css - THE design system for DRISHTI-PQC
   ----------------------------------------------------------------------------
   Single source of truth for every design token in the product. Before this
   file owned the whole set, sixteen pages each declared their own :root block
   and they had drifted: six different --accent values, six --good values, six
   --bad values. The most visible symptom was the shell's own sidebar - its
   active-item highlight reads var(--accent), so the SAME rail rendered Apple
   blue on tool pages and indigo on workspace pages depending on which file had
   last defined the token.

   Rule from here on: NO page declares a token this file owns. Page-specific
   values (--panel, --mono, --r-sm, display fonts) stay local, and because this
   file is linked BEFORE each page's inline <style>, a page can still override
   deliberately. It just must not do so by accident.

   ---------------------------------------------------------------------------
   Colour contract
   ---------------------------------------------------------------------------
   Two families, and they are not interchangeable:

     FILL tokens   (--accent, --good, --warn, --bad)
       Vivid. For backgrounds, bars, dots, borders, icons, chart marks - things
       measured against WCAG's 3:1 non-text threshold. Never for text.

     INK tokens    (--accent-ink, --good-ink, --warn-ink, --bad-ink)
       Darkened (light mode) / lightened (dark mode) so they clear 4.5:1 as
       TEXT on the surface behind them. Use these any time a grade, severity,
       status or link is rendered as words or numerals.

   The fill values fail badly as text - #34c759 on white is 2.2:1, #ff9f0a is
   2.1:1, #ff453a is 3.4:1, all under the 4.5:1 AA floor. That is why the ink
   pairs exist. Measured ratios are noted against each token below.

     --accent-strong is the third case: a fill that carries WHITE TEXT on top
   (solid buttons). #0a84ff only gives white 3.65:1, so solid fills use
   #0071e3 (4.70:1) while #0a84ff stays the brand colour for rings and borders.
   ============================================================================ */

:root{
  /* ---- Neutral palette ------------------------------------------------- */
  --bg:#f5f5f7;            /* system gray background */
  --surface:#ffffff;
  --ink:#1d1d1f;           /* near-black text */
  --ink-soft:#6e6e73;
  --ink-faint:#8e8e93;
  --line:#e3e3e6;

  /* ---- Accent: Apple blue ---------------------------------------------- */
  /* --accent        UI components only: rings, borders, active indicators,
                     icons, chart marks. 3.65:1 on white - clears the 3:1
                     non-text threshold, and is deliberately NOT used for text. */
  --accent:#0a84ff;
  /* --accent-strong solid fills that carry white text. White on #0071e3 is
                     4.70:1 (AA). Buttons, primary CTAs, selected pills. */
  --accent-strong:#0071e3;
  --accent-hover:#0077ed;
  --accent-press:#0058b0;
  /* --accent-ink    accent-COLOURED TEXT on a light surface. 4.70:1. */
  --accent-ink:#0071e3;
  /* --accent-soft   tint background for selected rows / soft chips. */
  --accent-soft:#e8f2ff;
  /* --accent-2      secondary (Apple indigo). Gradient partner, never alone. */
  --accent-2:#5e5ce6;
  /* --accent-glow   the focus/active halo. Derived, so it follows the accent
                     into dark mode instead of staying a hardcoded blue. */
  --accent-glow:color-mix(in srgb,var(--accent) 20%,transparent);

  /* ---- Semantic FILL (non-text: bars, dots, chart marks, borders) ------- */
  --good:#34c759;
  --warn:#ff9f0a;
  --bad:#ff453a;

  /* ---- Semantic INK (text: grades, severities, statuses) ---------------- */
  --good-ink:#1a7f43;      /* 5.05:1 on white */
  --warn-ink:#8a5a00;      /* 5.93:1 on white */
  --bad-ink:#b2312a;       /* 6.24:1 on white */

  /* ---- Semantic STRONG (solid fill carrying WHITE text) ----------------- */
  /* Ratios here are white-against-the-fill, so they hold in both themes -
     contrast is between the label and its own background, not the page.
     The vivid fills fail this badly: white on --warn is 2.1:1. */
  --good-strong:#1a7f43;   /* white on it: 5.05:1 */
  --warn-strong:#8a5a00;   /* white on it: 5.93:1 */
  --bad-strong:#c0392b;    /* white on it: 5.44:1 */

  /* ---- Semantic SOFT (pill / badge backgrounds behind the ink) ---------- */
  --good-soft:#e7f8ee;
  --good-line:#bfe9cf;
  --warn-soft:#fff5e6;
  --warn-line:#f0dcb8;
  --bad-soft:#fdeceb;
  --bad-line:#f2c9c6;

  /* ---- Elevation ------------------------------------------------------- */
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
  --shadow-lg:0 4px 12px rgba(0,0,0,.08),0 16px 40px rgba(0,0,0,.10);

  /* ---- Geometry -------------------------------------------------------- */
  --r:18px;

  /* ---- Type ------------------------------------------------------------ */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;

  /* ---- Focus ----------------------------------------------------------- */
  --focus-w:2px;
  --focus-offset:2px;
}

/* ----------------------------------------------------------------------------
   Dark theme.

   theme.js always stamps data-theme="light"|"dark" on <html> before first
   paint, so the attribute rule is what actually runs. The media-query block is
   the no-JS safety net: without it, a JS-disabled browser in dark mode would
   get light neutrals. Both blocks must stay in sync - they are one palette
   written twice because CSS has no way to share a body between selectors.
   ---------------------------------------------------------------------------- */
:root[data-theme="dark"]{
  --bg:#000000;
  --surface:#1c1c1e;
  --ink:#f5f5f7;
  --ink-soft:#98989d;
  --ink-faint:#6e6e73;
  --line:#2c2c2e;

  /* #0a84ff is already Apple's DARK-mode blue: 5.76:1 on black. It stays the
     component colour. Text switches to a lighter tint (7.97:1) because the
     component blue is still short of 4.5:1 against #1c1c1e surfaces. */
  --accent:#0a84ff;
  --accent-strong:#0071e3;
  --accent-hover:#3d9bff;
  --accent-press:#0058b0;
  --accent-ink:#4aa3ff;
  --accent-soft:#0d243d;
  --accent-2:#7d7bf0;

  --good:#34c759;
  --warn:#ff9f0a;
  --bad:#ff453a;

  --good-ink:#4ade80;      /* 12.0:1 on black */
  --warn-ink:#f0b429;      /* 9.3:1  on black */
  --bad-ink:#f87171;       /* 7.6:1  on black */

  --good-soft:#12331c;
  --good-line:#1e5631;
  --warn-soft:#33260a;
  --warn-line:#5a4410;
  --bad-soft:#3a1514;
  --bad-line:#5c2220;

  --shadow:0 1px 2px rgba(0,0,0,.5);
  --shadow-lg:0 16px 40px rgba(0,0,0,.6);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000;
    --surface:#1c1c1e;
    --ink:#f5f5f7;
    --ink-soft:#98989d;
    --ink-faint:#6e6e73;
    --line:#2c2c2e;

    --accent:#0a84ff;
    --accent-strong:#0071e3;
    --accent-hover:#3d9bff;
    --accent-press:#0058b0;
    --accent-ink:#4aa3ff;
    --accent-soft:#0d243d;
    --accent-2:#7d7bf0;

    --good:#34c759;
    --warn:#ff9f0a;
    --bad:#ff453a;

    --good-ink:#4ade80;
    --warn-ink:#f0b429;
    --bad-ink:#f87171;

    --good-soft:#12331c;
    --good-line:#1e5631;
    --warn-soft:#33260a;
    --warn-line:#5a4410;
    --bad-soft:#3a1514;
    --bad-line:#5c2220;

    --shadow:0 1px 2px rgba(0,0,0,.5);
    --shadow-lg:0 16px 40px rgba(0,0,0,.6);
  }
}

/* ============================================================================
   Global focus ring
   ----------------------------------------------------------------------------
   Every interactive element gets one visible, consistent keyboard indicator.

   Why this rule is shaped the way it is:

   1. :focus-visible, not :focus. Mouse clicks on buttons stay ringless; the
      ring appears for keyboard users, which is who it is for.

   2. Specificity 0,3,0 - `:root` (0,1,0) + `:is(...)` taking its most specific
      argument, [tabindex] (0,1,0) + :focus-visible (0,1,0). That is enough to
      beat the scattered `outline:none` declarations sitting in page base rules
      (e.g. `.inrow input{...outline:none}` at 0,1,1) WITHOUT resorting to
      !important, so a page that genuinely wants a different ring can still win
      with one more class.

   3. Two-tone ring (outline + a --surface-coloured shadow gap). The inner gap
      keeps the ring readable when the focused element sits on a coloured or
      image background, which a bare outline does not.

   Before this, six of the generated page modules - tool_pages, platform_pages,
   cert_intel_pages, api_security_page, account_pages, posture_page - had zero
   :focus-visible rules between them while setting outline:none 18 times, so
   tabbing through any tool page showed nothing at all.
   ============================================================================ */
:root :is(a[href],button,input,select,textarea,summary,[tabindex],
           [role="button"],[role="option"],[role="menuitem"],
           [role="switch"],[role="tab"],[contenteditable="true"]):focus-visible{
  /* `outline` already traces the element's own border-radius in every browser
     this ships to, so the ring hugs pills and cards without any extra work. */
  outline:var(--focus-w) solid var(--accent);
  outline-offset:var(--focus-offset);
}
/* NAVRATAN */


/* Elements the page has already given a soft accent glow (form fields) get the
   ring tightened in, so the crisp outline and the glow read as one indicator
   rather than two stacked halos. */
:root :is(input,textarea,select):focus-visible{
  outline-offset:1px;
}

/* A focused element must never be scrolled under a sticky header. */
:root{scroll-padding-top:84px}

/* Skip link: present on every shell page, visible only when focused. Keyboard
   users reach the content without tabbing the whole 22-item sidebar first. */
.skip-to-content{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--surface);color:var(--accent-ink);
  border:1px solid var(--accent);border-radius:0 0 12px 0;
  padding:12px 20px;font-family:var(--font);font-size:14px;font-weight:600;
  text-decoration:none;box-shadow:var(--shadow-lg);
}
.skip-to-content:focus{left:0}

/* NOTE: no global prefers-reduced-motion override here on purpose. Every page
   already declares its own reduced-motion branches (banks.html alone has
   seven), and several of them - the modal close path, for one - hang real
   logic off animationend. A blanket `animation-duration:.01ms !important`
   would reach inside all of that. Motion stays each component's business. */