/* Meet Your Edge brand tokens v3.1 "Namib" (2026-11-15)
   Source: layer-1-context/brand/brand-spec-v3.md. Same values as mye-tokens.json.
   Copy this file into an app, do not edit values per app.
   Apps that run offline: drop the @import and link fonts/fonts.css instead (local files). */


:root {
  /* ground and ink (light) */
  --mye-page: #FBFAF8;
  --mye-card: #FFFFFF;
  --mye-fill: #F1EFEB;      /* resting controls only, never a selected state */
  --mye-line: #E8E5E0;      /* card edges and dividers */
  --mye-field: #6E6258;     /* form field borders (needs 3 to 1) */
  --mye-ink: #3B342E;
  --mye-body: #554C44;
  --mye-muted: #6E6258;

  /* grades: fills (markers, bars, edges) */
  --mye-green: #00806A;
  --mye-amber: #AD7C00;
  --mye-red: #B3261E;
  /* grades: text (big number, labels) */
  --mye-green-text: #00705C;
  --mye-amber-text: #7F5B00;
  --mye-red-text: #A8231C;
  /* grades: tints (rows, the grading moment, coach panel) */
  --mye-green-tint: #E3F1EE;
  --mye-amber-tint: #F6EED9;
  --mye-red-tint: #F6E3E1;

  /* type */
  --mye-font: "Instrument Sans", Arial, sans-serif;
  --mye-font-figures: "DM Mono", Consolas, monospace;
  --mye-label-spacing: 0.08em;

  /* shape */
  --mye-radius: 6px;        /* every control, inner chips included */
  --mye-card-radius: 0;     /* cards are square */
  --mye-hairline: 1px;      /* lines, card edges, selected outlines */
  --mye-total-rule: 2px;    /* rule above a table total: grade fill on grade tables, ink on invoices */
  --mye-nav-rule: 2px;      /* active navigation underline, ink */
  --mye-edge: 4px;          /* grade edge on a card, and the heavy ink rule on warnings */
  --mye-button-h: 32px;     /* desktop */
  --mye-button-h-touch: 48px;
  --mye-touch-min: 44px;    /* any tap target on a phone */
}

/* dark mode: set data-theme="dark" on <html>, or follow the system.
   Kept as one copy: the media query block below repeats these lines exactly, change both together. */
:root[data-theme="dark"] {
  --mye-page: #1F1E1D; --mye-card: #292827; --mye-fill: #32302E; --mye-line: #3A3836; --mye-field: #B0A497;
  --mye-ink: #EFE8DE; --mye-body: #D8CEC2; --mye-muted: #B0A497;
  --mye-green: #35B5A5; --mye-amber: #E3A838; --mye-red: #F86A5E;
  --mye-green-text: #35B5A5; --mye-amber-text: #E3A838; --mye-red-text: #FA7A6F;
  --mye-green-tint: #1F3B37; --mye-amber-tint: #43361C; --mye-red-tint: #472A28;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mye-page: #1F1E1D; --mye-card: #292827; --mye-fill: #32302E; --mye-line: #3A3836; --mye-field: #B0A497;
    --mye-ink: #EFE8DE; --mye-body: #D8CEC2; --mye-muted: #B0A497;
    --mye-green: #35B5A5; --mye-amber: #E3A838; --mye-red: #F86A5E;
    --mye-green-text: #35B5A5; --mye-amber-text: #E3A838; --mye-red-text: #FA7A6F;
    --mye-green-tint: #1F3B37; --mye-amber-tint: #43361C; --mye-red-tint: #472A28;
  }
}

/* The grading moment keeps the full LIGHT set even in dark mode (spec v3, W4):
   every ground, ink, fill, grade text and tint value is reset here, so nothing inside the panel goes dark. */
.mye-moment {
  --mye-page: #FBFAF8; --mye-card: #FFFFFF; --mye-fill: #F1EFEB; --mye-line: #E8E5E0; --mye-field: #6E6258;
  --mye-ink: #3B342E; --mye-body: #554C44; --mye-muted: #6E6258;
  --mye-green: #00806A; --mye-amber: #AD7C00; --mye-red: #B3261E;
  --mye-green-text: #00705C; --mye-amber-text: #7F5B00; --mye-red-text: #A8231C;
  --mye-green-tint: #E3F1EE; --mye-amber-tint: #F6EED9; --mye-red-tint: #F6E3E1;
  color: var(--mye-body);
}
.mye-moment.green { background: #E3F1EE; } .mye-moment.amber { background: #F6EED9; } .mye-moment.red { background: #F6E3E1; }
@media (prefers-reduced-motion: no-preference) { .mye-moment { transition: background-color 250ms ease; } }

/* Selected states: one rule (spec v3.1). Chip = card colour + 1px ink outline. Row = 1px ink outline. */
.mye-selected { background: var(--mye-card); box-shadow: inset 0 0 0 1px var(--mye-ink); }
.mye-row-selected { box-shadow: inset 0 0 0 1px var(--mye-ink); }

/* Focus, links, fields */
:focus-visible { outline: 2px solid var(--mye-ink); outline-offset: 2px; }
.mye a, a.mye-link { color: var(--mye-ink); text-decoration: underline; text-underline-offset: 2px; }
.mye-field { border: 1px solid var(--mye-field); border-radius: var(--mye-radius); background: var(--mye-card); color: var(--mye-ink); }

/* Logo L1 as live text: <span class="mye-logo"><span class="a">Meet Your </span><span class="b">Edge</span></span> */
.mye-logo { font-family: var(--mye-font); color: var(--mye-ink); letter-spacing: -0.015em; white-space: nowrap; }
.mye-logo .a { font-weight: 400; } .mye-logo .b { font-weight: 600; }

/* Label style: 11px, 600, upper case, one letter spacing */
.mye-label { font: 600 11px/1.3 var(--mye-font); letter-spacing: var(--mye-label-spacing); text-transform: uppercase; color: var(--mye-muted); }

/* Printing an app screen: white page, keep tints and markers */
@media print {
  :root { --mye-page: #FFFFFF; }
  body { background: #FFFFFF; }
  .mye-moment, [class*="mye-tint"], svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}