/* Translayo — Color tokens v1.1
   Rule: green means primary action or selection — nothing else.
   Amber = drafts & notices. Red = destructive only.

   v1.1 adds (a) the inks and surfaces that styles.css had been spelling as raw
   hex, and (b) a dark palette, which is live: it applies on
   prefers-color-scheme, and [data-theme="dark"] forces it regardless of the OS
   setting, which is how to review it without changing your own. There is no
   toggle in the app — nothing stores a preference, and the CSP forbids the
   inline script that would apply one before first paint.

   Adding a colour means adding a token here, in BOTH blocks. Adding a literal
   anywhere in styles.css fails test/color-contrast.test.js, which also checks
   that the two dark blocks agree and that no pair is worse than in the light
   theme. */
:root{
  --bg:#F6F8F7;
  --surface:#FFFFFF;
  --surface-sunken:#F0F3F1;
  --ink:#17201B;
  --ink-2:#57625C;
  --ink-3:#67716B;
  --border:#E2E8E4;
  --border-strong:#C7D1CB;
  --green:#0E7A46;
  --green-hover:#0A6339;
  --green-tint:#E7F3EC;
  --green-edge:#BCDECB;
  --amber:#A16B07;
  /* Green does two jobs, and in a dark theme they pull apart. As a FILL it is the
     brand colour and must stay it — #0E7A46, the green in the logo — which on a
     dark card gives 3.04:1: enough for a control's boundary, and white on it is
     5.40:1 exactly as in the light theme. As TEXT the same value is 3.04:1 where
     4.5 is required, so green-as-text is the brand hue lightened: 152.7 degrees
     against the brand's 151.1, a drift of 1.6 nobody can see. One colour, two
     lightnesses, because contrast asks different things of a surface and a glyph. */
  --green-text:#0E7A46;
  --on-green:#FFFFFF;

  --amber-tint:#FBF3E0;
  --amber-border:#EDDFC0;
  --red:#BE3E2E;
  --red-tint:#FBECE9;

  /* ---- Inks on tints. These four were already in use as raw hex in
     styles.css — #6B4A0B alone appeared 18 times, with a comment at
     styles.css:606 explaining that it is *not* --amber. They were tokens in
     everything but name; naming them is what lets the palette invert. ---- */
  --amber-ink:#6B4A0B;
  --green-ink:#0B5D36;
  --red-ink:#7A2A1F;
  --green-tint-strong:#D8EBDF;

  /* Text that sits ON a filled accent surface (green/red/amber buttons and
     badges). White in light mode; the dark palette needs dark ink here,
     because its accents are light. This is the token the eleven `color:#fff`
     literals in styles.css resolve to. */
  --on-accent:#FFFFFF;

  /* Used four times in styles.css and never declared, so those four elements
     inherited full-strength ink instead of dimming. An alias rather than a value:
     it follows --ink-3 into the dark theme by construction, which is why it is
     absent from the dark blocks. */
  --muted:var(--ink-3);

  /* Deliberately inverted chip — dark ground in a light theme, and light
     ground in a dark one. `background:var(--ink)` was standing in for this. */
  --inverse-surface:#17201B;
  --inverse-ink:#FFFFFF;

  /* Ink at alpha: modal scrims and the ambient shadow colour. styles.css spells
     these as rgba(23,32,27,·) in eight places; 23,32,27 is --ink. */
  --overlay:rgba(23,32,27,.42);
  --overlay-strong:rgba(23,32,27,.3);
  --shadow-ink:23,32,27;


  /* ---- Channel tokens. styles.css spends these colours at a dozen different
     alphas (glows, scrims, shadows, washes). Naming the channel rather than
     each alpha keeps every existing value exact and still inverts: the alphas
     stay where they are and only the three numbers move. ---- */
  --green-rgb:14,122,70;
  --inverse-ink-rgb:255,255,255;

  /* ---- The last four one-off literals ---- */
  --surface-hover:#E8ECEA;          /* the utility-row hover wash */
  --green-sheen:#4FBF89;            /* the light stop in the progress shimmer */
  --sheen:rgba(255,255,255,.38);    /* the sweep across a skeleton field */
  --serp-link:#1a0dab;              /* Google's SERP blue — see the note below */

  /* --accent / --accent-soft were referenced with inline fallbacks and never
     declared. These are those fallbacks, promoted to tokens unchanged. */
  --accent:#2f7d4f;
  --accent-soft:rgba(60,130,90,.14);

  /* The two glyphs inside the logo mark. Near-black on the light topbar. */
  --logo-ink:#101722;
}

/* ---------------------------------------------------------------------------
   Dark palette.

   Not a mechanical inversion. Three things are deliberate:

   1. Accents are lightened, not reused. --green #0E7A46 measures 5.40:1 on
      white but only 3.33:1 on this ground — it would fail as text. The dark
      green is 7.15:1 on --surface. Same for amber and red.
   2. Because the accents are now light, --on-accent flips to dark ink. White
      on the dark-mode green would be 2.29:1.
   3. Primary text is 13.86:1 on --surface, not the ~16.7:1 the light theme
      runs. Pure white on near-black smears on OLED; this is measured restraint,
      not a shortfall. Every other pair meets or beats its light-mode ratio —
      see the parity check in the PR description.

   --surface stays lighter than --bg and --surface-sunken stays darker, so
   elevation reads the same direction as it does in the light theme.
--------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  /* A copy of the block below. CSS cannot share a declaration block between a
     media query and a selector, so the values are written twice and
     test/color-contrast.test.js asserts the two stay identical.
     :not([data-theme="light"]) lets a future explicit light choice win. */
  :root:not([data-theme="light"]){
    --bg:#121714;
    --surface:#1A211D;
    --surface-sunken:#0D120F;
    --ink:#E8EDEA;
    --ink-2:#A8B3AD;
    --ink-3:#8A958F;
    --border:#2A332E;
    --border-strong:#3D4842;
    --green:#0E7A46;
    --green-hover:#12874E;
  --green-text:#45C088;
  --on-green:#FFFFFF;
    --green-tint:#1C2E24;
    --green-edge:#2D3F35;
    --amber:#CBAF76;
    --amber-tint:#2E2618;
    --amber-border:#3A3224;
    --red:#D8877A;
    --red-tint:#392522;
  
    --amber-ink:#C4B491;
    --green-ink:#87C9AA;
    --red-ink:#DFBFB7;
    --green-tint-strong:#24382C;
  
    --on-accent:#0E1712;
  
    --inverse-surface:#E8EDEA;
    --inverse-ink:#17201B;
  
    /* Scrims go darker, not lighter: the ground beneath them is already dark, so
       the light-theme alpha would not separate the dialog from the page. */
    --overlay:rgba(4,7,5,.66);
    --overlay-strong:rgba(4,7,5,.55);
    --shadow-ink:0,0,0;
  
    --green-rgb:69,192,136;
    --inverse-ink-rgb:23,32,27;
  
    --surface-hover:#232B26;
    --green-sheen:#8FE0B3;
    /* A .38 white sweep reads as a flashbulb on a dark field; the same gesture
       needs a tenth of the strength. */
    --sheen:rgba(255,255,255,.10);
    /* Not part of the app palette on purpose: .seo-snippet-title imitates a
       Google result, so it follows Google's own dark-mode link colour rather
       than Translayo's green. */
    --serp-link:#8AB4F8;
  
    --accent:#5FB98A;
    --accent-soft:rgba(143,224,179,.16);
  
    --logo-ink:#E8EDEA;
  }
}
:root[data-theme="dark"]{
  --bg:#121714;
  --surface:#1A211D;
  --surface-sunken:#0D120F;
  --ink:#E8EDEA;
  --ink-2:#A8B3AD;
  --ink-3:#8A958F;
  --border:#2A332E;
  --border-strong:#3D4842;
  --green:#0E7A46;
  --green-hover:#12874E;
  --green-text:#45C088;
  --on-green:#FFFFFF;
  --green-tint:#1C2E24;
  --green-edge:#2D3F35;
  --amber:#CBAF76;
  --amber-tint:#2E2618;
  --amber-border:#3A3224;
  --red:#D8877A;
  --red-tint:#392522;

  --amber-ink:#C4B491;
  --green-ink:#87C9AA;
  --red-ink:#DFBFB7;
  --green-tint-strong:#24382C;

  --on-accent:#0E1712;

  --inverse-surface:#E8EDEA;
  --inverse-ink:#17201B;

  /* Scrims go darker, not lighter: the ground beneath them is already dark, so
     the light-theme alpha would not separate the dialog from the page. */
  --overlay:rgba(4,7,5,.66);
  --overlay-strong:rgba(4,7,5,.55);
  --shadow-ink:0,0,0;

  --green-rgb:69,192,136;
  --inverse-ink-rgb:23,32,27;

  --surface-hover:#232B26;
  --green-sheen:#8FE0B3;
  /* A .38 white sweep reads as a flashbulb on a dark field; the same gesture
     needs a tenth of the strength. */
  --sheen:rgba(255,255,255,.10);
  /* Not part of the app palette on purpose: .seo-snippet-title imitates a
     Google result, so it follows Google's own dark-mode link colour rather
     than Translayo's green. */
  --serp-link:#8AB4F8;

  --accent:#5FB98A;
  --accent-soft:rgba(143,224,179,.16);

  --logo-ink:#E8EDEA;
}