/*
 * Design tokens. The only file that knows what the product looks like.
 *
 * Split deliberately into two halves:
 *
 *   BRAND      the swappable part. Colour and the masthead treatment. Currently
 *              WeSubdivide. Replacing this with another firm's palette is a change to
 *              this block and nothing else.
 *   STRUCTURE  type scale, spacing, radii, elevation, semantics. Brand agnostic by
 *              design, so the layout survives a rebrand intact.
 *
 * Nothing downstream should hard code a colour or a size. If a component needs a value
 * that is not here, the value is probably wrong or the token is missing.
 *
 * No web fonts anywhere. The tool has to work offline, print identically, and load
 * with no network dependency, so everything is a system stack.
 */

:root {
  /* ==========================================================  BRAND  ===== */
  /*
   * WeSubdivide, from the concept mockups. The rule that comes with it matters more
   * than the hex values:
   *
   *   GREEN MEANS OPPORTUNITY. BLACK MEANS ACTION.
   *   Green never appears on a button, a header or the nav.
   *
   * That is a stronger discipline than "use the brand colour", because it makes colour
   * carry meaning instead of decoration: if something is green on this page, the site
   * has potential. Anywhere green would be merely decorative, it is black instead.
   */
  --brand-900: #1d5d00;   /* deepest green, text on pale green */
  --brand-700: #2a8500;   /* brand green. The only green allowed to carry white text */
  --brand-600: #349f00;
  --brand-500: #48cb0b;   /* bright green, high potential fill, BLACK text only */
  --brand-200: #b4e79a;
  --brand-100: #ddf5cd;
  --brand-050: #f0fae9;
  --brand-contrast: #ffffff;

  /*
   * Action. Every button, every primary control, the nav. Deliberately separate from
   * the brand, so a control can never accidentally imply opportunity.
   */
  --action: #000000;
  --action-soft: #0d0d0d;      /* large dark surfaces, the nav rail */
  --action-hover: #262626;
  --action-contrast: #ffffff;

  /* ======================================================  STRUCTURE  ===== */

  /* Neutrals are warmed very slightly. Pure greys read cold and cheap on paper. */
  --ink-900: #000000;
  --ink-800: #0d0d0d;
  --ink-700: #2f3a46;
  --ink-600: #46525f;
  --ink-500: #716a6a;
  --ink-400: #7d8894;
  --ink-300: #a3acb7;
  --ink-200: #c7ced6;
  --line: #dddddd;
  --line-soft: #ececec;
  --paper: #ffffff;
  --paper-sunk: #f2f2f2;
  --paper-raised: #ffffff;

  /* Semantic states. Muted rather than traffic light: these sit next to each other in
     dense tables and saturated versions turn the page into an argument. */
  --good-700: #1d5d00;
  --good-600: #2a8500;
  --good-050: #f0fae9;
  --warn-700: #7d5410;
  --warn-600: #9a6a12;
  --warn-050: #fcf3e2;
  --bad-700: #85201a;
  --bad-600: #a3261f;
  --bad-050: #fbeceb;
  --unknown-600: #6b7683;
  --unknown-050: #f1f3f6;

  /*
   * Chip text for the unresolved state, one step darker than --unknown-600.
   * The design handoff specifies #404a54 for the word inside a "not established"
   * chip: --unknown-600 is the GLYPH background, and a label in that value on a pale
   * fill sits around 4.3:1, under the 4.5 floor everything else here clears.
   */
  --unknown-700: #404a54;

  /*
   * Chip borders, one step in from each -050 fill so a chip has a visible edge
   * without a second colour entering the palette.
   *
   * These are the ONLY values the design handoff needed that theme.css did not
   * already carry. Every other value in its table -- the -050 fills, the -600 glyph
   * backgrounds, the -700 label colours -- matched what was already here to the hex,
   * which is a good sign the review was done against the real tokens rather than
   * around them.
   */
  --good-200: #cdeab4;
  --warn-200: #e8d3a6;
  --bad-200: #e7c4c1;
  --unknown-200: #a3acb7;

  /* Type. One family, strong weight contrast, tight tracking as size grows. That is
     what carries hierarchy without a second typeface. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 25px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.55;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.07em;

  /* Spacing, on a 4px base. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  --r-sm: 5px; --r-md: 9px; --r-lg: 14px; --r-pill: 999px;

  /* Elevation. Two levels only. More than that and nothing reads as important. */
  --shadow-1: 0 1px 2px rgba(16, 22, 29, .05), 0 1px 1px rgba(16, 22, 29, .04);
  --shadow-2: 0 8px 28px rgba(16, 22, 29, .13), 0 2px 6px rgba(16, 22, 29, .06);
}

/*
 * Figures are read as columns of numbers all over this tool, so they line up rather
 * than jitter between rows. Tabular numerals are the single cheapest thing that makes
 * a data interface look considered.
 */
.num, .op-value, .row-value, td, th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================  DARK  =========
 * One dark palette, defined once, applied three ways:
 *   - :root[data-theme="dark"]   the visitor pressed the toggle
 *   - :root[data-theme="light"]  the visitor pressed it the other way, and this must
 *                                beat the system preference below
 *   - prefers-color-scheme       no choice made yet, follow the operating system
 *
 * Only the palette changes. Every layout, size and spacing token above is shared, which
 * is the whole reason colour lives in variables.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-900: #f4f4f4; --ink-800: #e6e6e6; --ink-700: #c5cfda; --ink-600: #a7b3c0;
    --ink-500: #909dab; --ink-400: #78858f; --ink-300: #5e6a76; --ink-200: #434e5a;
    --line: #2e2e2e; --line-soft: #242424;
    --paper: #0d0d0d; --paper-sunk: #1a1a1a; --paper-raised: #171717;
    --brand-900: #cdf3b4; --brand-700: #7fd94a; --brand-600: #6ccb35;
    --brand-500: #48cb0b; --brand-200: #2f5c1a; --brand-100: #24401a;
    --brand-050: #16240f; --brand-contrast: #08140a;
    --good-700: #9ae86a; --good-600: #6ccb35; --good-050: #16240f;
    --warn-700: #ecc272; --warn-600: #d5a54a; --warn-050: #302716;
    --bad-700: #f39a92; --bad-600: #e0776f; --bad-050: #331d1c;
    --unknown-600: #8c98a5; --unknown-050: #1d252e;
    --unknown-700: #b6c2ce;
    /* Chip borders, dark: lifted OFF the sunk fill rather than darkened into it,
    because the dark ramp inverts and -700 is the lightest step. */
    --good-200: #2f5a1c; --warn-200: #5c4a24; --bad-200: #61352f; --unknown-200: #3a4552;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 10px 34px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --ink-900: #f4f4f4; --ink-800: #e6e6e6; --ink-700: #c5cfda; --ink-600: #a7b3c0;
  --ink-500: #909dab; --ink-400: #78858f; --ink-300: #5e6a76; --ink-200: #434e5a;
  --line: #2e2e2e; --line-soft: #242424;
  --paper: #0d0d0d; --paper-sunk: #1a1a1a; --paper-raised: #171717;
  --brand-900: #cdf3b4; --brand-700: #7fd94a; --brand-600: #6ccb35;
  --brand-500: #48cb0b; --brand-200: #2f5c1a; --brand-100: #24401a;
  --brand-050: #16240f; --brand-contrast: #08140a;
  --good-700: #9ae86a; --good-600: #6ccb35; --good-050: #16240f;
  --warn-700: #ecc272; --warn-600: #d5a54a; --warn-050: #302716;
  --bad-700: #f39a92; --bad-600: #e0776f; --bad-050: #331d1c;
  --unknown-600: #8c98a5; --unknown-050: #1d252e;
  --unknown-700: #b6c2ce;
  /* Chip borders, dark: lifted OFF the sunk fill rather than darkened into it,
  because the dark ramp inverts and -700 is the lightest step. */
  --good-200: #2f5a1c; --warn-200: #5c4a24; --bad-200: #61352f; --unknown-200: #3a4552;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 10px 34px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
}

/* The printed sheet is always on white paper, whatever the screen is doing. */
@media print { :root { --paper: #fff; --ink-900: #10161d; --ink-800: #1c242e; } }

/*
 * GREEN MEANS OPPORTUNITY, BLACK MEANS ACTION.
 *
 * Enforced here rather than left to each stylesheet to remember. Buttons were brand
 * coloured before the palette changed, which under the new rule would have made every
 * control look like a finding.
 */
button.primary, .cta, .op-bar button.primary {
  background: var(--action) !important;
  border-color: var(--action) !important;
  color: var(--action-contrast) !important;
}
button.primary:hover, .cta:hover, .op-bar button.primary:hover {
  background: var(--action-hover) !important;
  border-color: var(--action-hover) !important;
}
/* The eyebrow, the mark and the search focus ring are the places green is earned. */
.mark-glyph { background: var(--brand-700); }

/* Action is black on white paper and white on a dark surface. The rule is unchanged
   in meaning, only in what "the opposite of the page" happens to be. */
:root[data-theme="dark"] {
  --action: #f4f4f4; --action-soft: #e6e6e6; --action-hover: #ffffff;
  --action-contrast: #0d0d0d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --action: #f4f4f4; --action-soft: #e6e6e6; --action-hover: #ffffff;
    --action-contrast: #0d0d0d;
  }
}