/* Mycroft "Monocle" design tokens (issue #9, logo pack v0.1).
 *
 * Brand tokens are the six spec colours. Everything in the app should use
 * the ROLE tokens below them, never a brand token directly, so the light
 * and dark schemes stay in one place.
 *
 * Text rules from the spec: Brass, Light Brass and Sage all fail 4.5:1 on
 * Parchment, so they never carry text on light grounds. Text roles
 * (--text, --text-2, --muted, --accent, --danger, --success, --warning)
 * are checked by test/brand-tokens.test.js in both schemes.
 *
 * The dark scheme is declared twice: once for the system preference
 * (unless the viewer forced light) and once for a forced dark choice.
 * Keep the two blocks identical; the test enforces it.
 */

:root {
  --brand-green: #1F4D3F;   /* Diogenes Green: primary, buttons, links */
  --brand-ink: #161C24;     /* Club Ink: body text, dark surfaces */
  --brand-parch: #F4F1EA;   /* Parchment: page ground, text on dark */
  --brand-brass: #B8862B;   /* Brass: alerts and graphics only, never text on light */
  --brand-lbrass: #D9A84A;  /* Light Brass: brass on dark grounds */
  --brand-sage: #6FB39A;    /* Sage: data/trend lines on dark, dark-mode accent */

  --serif: Fraunces, Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  color-scheme: light;
  --ground: #F4F1EA;
  --surface: #FFFFFF;
  --surface-rgb: 255, 255, 255;
  --panel: #FFFFFF;
  --text: #161C24;
  --text-2: #2E3640;
  --muted: #4E5560;
  --rule: #D8D2C4;
  --primary: #1F4D3F;
  --primary-hover: #163A2F;
  --on-primary: #F4F1EA;
  --on-primary-muted: #D8D4CA;
  --on-strong: #F4F1EA;
  --accent: #1F4D3F;
  --focus: #1F4D3F;
  --tint-rgb: 31, 77, 63;
  --neutral-rgb: 78, 85, 96;
  --contrast-rgb: 22, 28, 36;
  --backdrop-rgb: 22, 28, 36;
  --danger: #9E3A2F;
  --danger-rgb: 158, 58, 47;
  --success: #2D6A47;
  --success-rgb: 45, 106, 71;
  --warning: #7A5512;
  --warning-rgb: 184, 134, 43;
  --warning-graphic: #B8862B;
  --chart-1: #1F4D3F;
  --chart-2: #B8862B;
  --chart-3: #5E9C85;
  --chart-4: #161C24;
  --chart-5: #8A6420;
  --chart-6: #7A8590;
  --logo-positive: inline-block;
  --logo-reverse: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #10151B;
    --surface: #161C24;
    --surface-rgb: 22, 28, 36;
    --panel: linear-gradient(180deg, rgba(111, 179, 154, 0.10), rgba(111, 179, 154, 0.03));
    --text: #F4F1EA;
    --text-2: #D8D4CA;
    --muted: #AEB4BC;
    --rule: #2B333D;
    --primary: #2A6352;
    --primary-hover: #33765F;
    --on-primary: #F4F1EA;
    --on-strong: #161C24;
    --accent: #6FB39A;
    --focus: #6FB39A;
    --tint-rgb: 111, 179, 154;
    --neutral-rgb: 174, 180, 188;
    --contrast-rgb: 244, 241, 234;
    --backdrop-rgb: 5, 7, 10;
    --danger: #E58A7F;
    --danger-rgb: 229, 138, 127;
    --success: #7CC79A;
    --success-rgb: 124, 199, 154;
    --warning: #D9A84A;
    --warning-rgb: 217, 168, 74;
    --warning-graphic: #D9A84A;
    --chart-1: #6FB39A;
    --chart-2: #D9A84A;
    --chart-3: #F4F1EA;
    --chart-4: #3F8A70;
    --chart-5: #AEB4BC;
    --chart-6: #B8862B;
    --logo-positive: none;
    --logo-reverse: inline-block;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #10151B;
  --surface: #161C24;
  --surface-rgb: 22, 28, 36;
  --panel: linear-gradient(180deg, rgba(111, 179, 154, 0.10), rgba(111, 179, 154, 0.03));
  --text: #F4F1EA;
  --text-2: #D8D4CA;
  --muted: #AEB4BC;
  --rule: #2B333D;
  --primary: #2A6352;
  --primary-hover: #33765F;
  --on-primary: #F4F1EA;
  --on-strong: #161C24;
  --accent: #6FB39A;
  --focus: #6FB39A;
  --tint-rgb: 111, 179, 154;
  --neutral-rgb: 174, 180, 188;
  --contrast-rgb: 244, 241, 234;
  --backdrop-rgb: 5, 7, 10;
  --danger: #E58A7F;
  --danger-rgb: 229, 138, 127;
  --success: #7CC79A;
  --success-rgb: 124, 199, 154;
  --warning: #D9A84A;
  --warning-rgb: 217, 168, 74;
  --warning-graphic: #D9A84A;
  --chart-1: #6FB39A;
  --chart-2: #D9A84A;
  --chart-3: #F4F1EA;
  --chart-4: #3F8A70;
  --chart-5: #AEB4BC;
  --chart-6: #B8862B;
  --logo-positive: none;
  --logo-reverse: inline-block;
}

html, body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--serif);
}

button, input, select, textarea, code, kbd, samp {
  font-family: var(--mono);
}

a { color: var(--accent); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

::placeholder { color: var(--muted); opacity: 0.8; }

/* Logo lockups: positive on light grounds, reverse on dark. */
.logo-positive { display: var(--logo-positive); }
.logo-reverse { display: var(--logo-reverse); }

/* Clear space: the lens radius is 34 of 120 units, about 28% of the
 * lockup height, kept on every side. */
.brand-lockup {
  display: inline-block;
  padding: calc(var(--lockup-h, 56px) * 0.28);
  line-height: 0;
}
.brand-lockup img {
  height: var(--lockup-h, 56px);
  width: auto;
  min-width: 160px; /* interim minimum until the spec defines one */
}

.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1.5px solid var(--rule);
  background: var(--surface);
  color: var(--text);
  font: 500 13px/1 var(--mono);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); }

/* Reports print on the light (positive) scheme whatever the screen uses. */
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    color-scheme: light;
    --ground: #FFFFFF;
    --surface: #FFFFFF;
    --surface-rgb: 255, 255, 255;
    --panel: #FFFFFF;
    --text: #161C24;
    --text-2: #2E3640;
    --muted: #4E5560;
    --rule: #D8D2C4;
    --primary: #1F4D3F;
    --on-primary: #F4F1EA;
    --on-strong: #F4F1EA;
    --accent: #1F4D3F;
    --tint-rgb: 31, 77, 63;
    --neutral-rgb: 78, 85, 96;
    --contrast-rgb: 22, 28, 36;
    --danger: #9E3A2F;
    --danger-rgb: 158, 58, 47;
    --success: #2D6A47;
    --success-rgb: 45, 106, 71;
    --warning: #7A5512;
    --warning-rgb: 184, 134, 43;
    --warning-graphic: #B8862B;
    --chart-1: #1F4D3F;
    --chart-2: #B8862B;
    --chart-3: #5E9C85;
    --chart-4: #161C24;
    --chart-5: #8A6420;
    --chart-6: #7A8590;
    --logo-positive: inline-block;
    --logo-reverse: none;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .theme-toggle { display: none !important; }
}