/**
 * Copyright 2026 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* ===================================================================
   GEMMA TOKEN LAYER

   The only stylesheet permitted to contain raw hex values. Everything
   else consumes these custom properties. Enforced by:

       uv run python scripts/lint_docs.py --check css

   Loaded first in extra_css so later sheets can build on it.
   =================================================================== */

:root {
  /* -----------------------------------------------------------------
     Brand blue.

     ONE KNOB: change --gemma-blue-seed and the whole ramp, both colour
     schemes and every component follow. Check a new seed first with
     `uv run python scripts/check_contrast.py --seed "#RRGGBB"`, and see
     "Colour tokens" in docs/contributing/components.md for the derived
     values and each step's role.

     Steps are the seed mixed with white (black at the dark end) in sRGB,
     so they stay on the seed's own hue. Contrast is symmetric: a colour
     too light to read *on* white is also too light to sit *behind* white
     text. Fills carrying white text use 600/700, never 300/500 -- 500 is
     decorative only.
     ----------------------------------------------------------------- */
  --gemma-blue-seed: #0B57D0;

  --gemma-blue-50: color-mix(in srgb, var(--gemma-blue-seed) 8%, #FFFFFF);
  --gemma-blue-100: color-mix(in srgb, var(--gemma-blue-seed) 20%, #FFFFFF);
  --gemma-blue-300: color-mix(in srgb, var(--gemma-blue-seed) 52%, #FFFFFF);
  --gemma-blue-500: color-mix(in srgb, var(--gemma-blue-seed) 78%, #FFFFFF);
  --gemma-blue-600: color-mix(in srgb, var(--gemma-blue-seed) 90%, #FFFFFF);
  --gemma-blue-700: var(--gemma-blue-seed);
  --gemma-blue-800: color-mix(in srgb, var(--gemma-blue-seed) 78%, #000000);

  /* Legacy aliases. Kept so nav/content/home keep resolving; each now
     points into the ramp rather than carrying its own hex. */
  --gemma-blue: var(--gemma-blue-500);
  --gemma-blue-deep: var(--gemma-blue-700);
  --gemma-blue-light: var(--gemma-blue-300);
  --gemma-white: #FFFFFF;
  --gemma-ink: #202124;

  /* Landing-page gradient stops, derived from the palette. */
  --gemma-ink-raised: #152238;
  --gemma-navy-900: #0e2042;
  --gemma-navy-800: #102a5c;
  --gemma-navy-700: #16366e;
  --gemma-home-bg: #040d1a;
  --gemma-home-bg-raised: #07152f;
  --gemma-home-bg-mid: #040c1e;
  --gemma-home-bg-deep: #020712;
  --gemma-blue-strong: var(--gemma-blue-800);
  --gemma-blue-hover: var(--gemma-blue-600);

  /* -----------------------------------------------------------------
     Semantic roles — remapped per colour scheme further down.
     ----------------------------------------------------------------- */
  --gemma-accent: var(--gemma-blue-700);      /* text-safe brand colour     */
  --gemma-accent-fill: var(--gemma-blue-700); /* fills that carry white text */

  /* -----------------------------------------------------------------
     Neutral ramp

     Tinted very slightly blue so greys belong to the palette rather
     than reading as a separate neutral system. This is where the calm
     comes from: surfaces differ by *tint*, not by borders everywhere.
     ----------------------------------------------------------------- */
  --gemma-n0: #ffffff;
  --gemma-n50: #f7f9fc;   /* page tint behind white surfaces */
  --gemma-n100: #eef1f6;
  --gemma-n150: #e4e9f0;  /* hairlines */
  --gemma-n200: #cfd6e0;
  --gemma-n300: #aab3c2;
  --gemma-n400: #8b95a6;
  --gemma-n500: #6b7486;
  --gemma-n600: #545c6b;
  --gemma-n700: #3f4653;
  --gemma-n800: #2b303a;
  --gemma-n900: #202124;  /* = --gemma-ink */

  /* Semantic surfaces, remapped for dark mode below. */
  --gemma-surface: var(--gemma-n0);
  --gemma-surface-sunken: var(--gemma-n50);
  --gemma-box-surface: var(--gemma-n50);   /* bordered boxes: tinted here, raised in dark */
  --gemma-border: var(--gemma-n150);
  /* One step darker than the hairline. Separators inside a row have to out-read the rule
     that closes the row, or the row looks like a grid. */
  --gemma-border-strong: var(--gemma-n200);
  /* n500 measures 4.46:1 on the n50 tint -- just under AA for the 12-13px text this is
     used for (table headers, nav, tabs). n600 clears it at 6.38:1. */
  --gemma-text-muted: var(--gemma-n600);

  /* Nav links sit one step stronger than muted so the hierarchy survives.
     Scheme-aware: a fixed neutral here reads as 2.9:1 in dark mode. */
  --gemma-text-secondary: var(--gemma-n700);

  /* Brand blue for small text on the tinted header/table surfaces. Plain blue-deep measures
     4.41:1 there -- fine on white, under AA on the tint. */
  --gemma-accent-on-tint: var(--gemma-blue-700);

  /* Status accents for admonition rails. Categorical, so not derived
     from the brand blue -- they have to stay distinguishable. */
  --gemma-status-info: var(--gemma-blue);
  --gemma-status-success: #10b981;
  --gemma-status-warning: #f59e0b;
  --gemma-status-danger: #ef4444;

  /* Header: a near-white blue tint, not a slab of brand colour. The blue
     appears only on the active tab indicator, where 3:1 is sufficient. */
  --gemma-header-bg: var(--gemma-n100);
  --gemma-header-fg: var(--gemma-n700);
  --gemma-header-border: var(--gemma-n150);

  /* -----------------------------------------------------------------
     Spacing scale (rem). Use these rather than ad-hoc values.
     ----------------------------------------------------------------- */
  --gemma-space-1: 0.25rem;
  --gemma-space-2: 0.5rem;
  --gemma-space-3: 0.75rem;
  --gemma-space-4: 1rem;
  --gemma-space-5: 1.5rem;
  --gemma-space-6: 2rem;
  --gemma-space-7: 3rem;

  /* -----------------------------------------------------------------
     Radius scale
     ----------------------------------------------------------------- */
  --gemma-radius-sm: 0.25rem;
  --gemma-radius-md: 0.5rem;
  --gemma-radius-lg: 0.75rem;
  --gemma-radius-pill: 999px;

  /* -----------------------------------------------------------------
     Elevation. Kept subtle: the docs are text-first.
     ----------------------------------------------------------------- */
  --gemma-shadow-sm: 0 1px 2px rgb(32 33 36 / 8%);
  --gemma-shadow-md: 0 1px 3px rgb(32 33 36 / 10%), 0 4px 12px rgb(32 33 36 / 6%);
  --gemma-shadow-lg: 0 2px 6px rgb(32 33 36 / 12%), 0 12px 32px rgb(32 33 36 / 10%);

  /* -----------------------------------------------------------------
     Chat-token badge categories (consumed by tokens.css).
     Categorical, so they stay visually distinct rather than being
     derived from the brand blue.
     ----------------------------------------------------------------- */
  --gemma-cat-turn-bg: #dbeafe;
  --gemma-cat-turn-fg: #1e40af;
  --gemma-cat-turn-border: #93c5fd;

  --gemma-cat-role-bg: #fee2e2;
  --gemma-cat-role-fg: #991b1b;
  --gemma-cat-role-border: #fca5a5;

  --gemma-cat-multi-bg: #f3e8ff;
  --gemma-cat-multi-fg: #6b21a8;
  --gemma-cat-multi-border: #d8b4fe;

  --gemma-cat-tool-bg: #d1fae5;
  --gemma-cat-tool-fg: #065f46;
  --gemma-cat-tool-border: #6ee7b7;

  --gemma-cat-think-bg: #fef3c7;
  --gemma-cat-think-fg: #92400e;
  --gemma-cat-think-border: #fde68a;

  /* Output code blocks, tinted apart from ordinary code. */
  --gemma-output-bg: #EDF7FF;
}

/* ===================================================================
   Dark scheme
   =================================================================== */
[data-md-color-scheme="slate"][data-md-color-primary],
[data-md-color-scheme="slate"] {
  --gemma-accent: var(--gemma-blue-300);
  /* NOT blue-300: this fill carries white text, and white on #71A4DF is 2.60:1. */
  --gemma-accent-fill: var(--gemma-blue-600);

  --gemma-surface: #1c1d21;
  --gemma-surface-sunken: #17181c;
  --gemma-box-surface: #1c1d21;
  --gemma-border: #303239;
  --gemma-border-strong: #454852;
  --gemma-text-muted: var(--gemma-n300);
  --gemma-text-secondary: var(--gemma-n200);

  --gemma-accent-on-tint: var(--gemma-blue-300);
  --gemma-header-bg: #17181c;
  --gemma-header-fg: var(--gemma-n200);
  --gemma-header-border: #303239;

  --gemma-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --gemma-shadow-md: 0 1px 3px rgb(0 0 0 / 45%), 0 4px 12px rgb(0 0 0 / 30%);
  --gemma-shadow-lg: 0 2px 6px rgb(0 0 0 / 50%), 0 12px 32px rgb(0 0 0 / 40%);

  --gemma-cat-turn-bg: #1e3a8a;
  --gemma-cat-turn-fg: #bfdbfe;
  --gemma-cat-turn-border: #3b82f6;

  --gemma-cat-role-bg: #7f1d1d;
  --gemma-cat-role-fg: #fecaca;
  --gemma-cat-role-border: #ef4444;

  --gemma-cat-multi-bg: #581c87;
  --gemma-cat-multi-fg: #f3e8ff;
  --gemma-cat-multi-border: #a855f7;

  --gemma-cat-tool-bg: #064e3b;
  --gemma-cat-tool-fg: #a7f3d0;
  --gemma-cat-tool-border: #10b981;

  --gemma-cat-think-bg: #78350f;
  --gemma-cat-think-fg: #fef3c7;
  --gemma-cat-think-border: #f59e0b;

  --gemma-output-bg: #1a1a2e;
}

/* ===================================================================
   Bind Material's variables to the Gemma palette.

   Everything downstream (links, header, focus rings, selection) picks
   these up, so component sheets never need to name a brand colour.
   =================================================================== */
/* Material scopes its palette at `[data-md-color-scheme=X][data-md-color-primary=Y]`
   (specificity 0,2,0). A plain `[data-md-color-scheme=X]` is 0,1,0 and loses regardless of
   load order, so the second attribute is required rather than decorative. */
:root,
[data-md-color-scheme="default"][data-md-color-primary],
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--gemma-blue-deep);
  --md-primary-fg-color--light: var(--gemma-blue-light);
  --md-primary-fg-color--dark: var(--gemma-navy-800);
  --md-primary-bg-color: var(--gemma-white);

  --md-accent-fg-color: var(--gemma-blue);
  --md-typeset-a-color: var(--gemma-accent);
}

[data-md-color-scheme="slate"][data-md-color-primary],
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--gemma-ink);
  --md-primary-fg-color--light: var(--gemma-blue-light);
  --md-primary-fg-color--dark: var(--gemma-navy-900);

  --md-accent-fg-color: var(--gemma-blue-light);
  --md-typeset-a-color: var(--gemma-accent);
}