/* ============================================================================
   Tokens - Colors
   system/tokens/colors.css

   Two layers in one file:
   1. Raw palette (--gm-pdk, --gm-g7, etc.) - never reference these from
      components. They are the truth, but components read the semantic layer.
   2. Semantic tokens (--gm-bg-base, --gm-text-primary, etc.) - this is
      what components reference. Override these (NOT the raw palette)
      for product-local adjustments.

   The Giant Monkey design system has ONE visual style (Museum Tech on the
   deep green base). There is no dark/light mode toggle. The accessible
   mode (rules/accessibility-mode.md) is a functional override for
   contrast, motion, and touch targets - not an alternate aesthetic.

   See sibling colors.md for intent, contrast notes, and when-to-use.
   ============================================================================ */

:root {
  /* ----------------------------------------------------------------------
     Primary Green Scale - Giant Monkey brand
     ---------------------------------------------------------------------- */
  --gm-pdk: #04342c;   /* Deepest - hero BG, contact BG */
  --gm-pd:  #085041;   /* Hover on dark, mission BG element */
  --gm-p:   #0a7d61;   /* Brand primary - buttons, links (5.10:1 on white, AA) */
  --gm-pm:  #1d9e75;   /* Button hover on light */
  --gm-pl:  #5dcaa5;   /* Accent on dark (6.8:1 on --gm-pdk) */
  --gm-pli: #9fe1cb;   /* Light accent (9.2:1 on --gm-pdk) */
  --gm-pls: #e1f5ee;   /* Lightest - careers section, tag BG */

  /* ----------------------------------------------------------------------
     Neutral Scale - warm stone tones (NOT pure gray)
     ---------------------------------------------------------------------- */
  --gm-g9: #1c1917;    /* Primary text on light */
  --gm-g7: #44403c;    /* Secondary text, section labels (9.42:1 on white) */
  --gm-g5: #78716c;    /* Tertiary - sparingly, only on pure white (4.72:1) */
  --gm-g3: #d6d3d1;    /* Borders, inactive */
  --gm-g2: #e7e5e4;    /* Borders, outlines */
  --gm-g1: #f5f5f4;    /* Elevated surfaces */

  /* ----------------------------------------------------------------------
     Special - narrow use, do not generalise
     ---------------------------------------------------------------------- */
  --gm-mission: #0f5c47;   /* Mission section background only */
  --gm-footer:  #02231c;   /* Footer only, darkest surface */

  /* Traffic light dots - browser mockup decoration only */
  --gm-tl-red:    #ff5f57;
  --gm-tl-yellow: #febc2e;
  --gm-tl-green:  #28c840;

  /* ----------------------------------------------------------------------
     Semantic Foundation

     These are the tokens components read. Override these for product-local
     adjustments; never override the raw palette above. The defaults
     describe the canonical GM Greens palette on the deep-green base -
     there is no alternate "light" variant.
     ---------------------------------------------------------------------- */

  /* Backgrounds */
  --gm-bg-base:     var(--gm-pdk);     /* page background */
  --gm-bg-elevated: #0a4a3c;           /* one step brighter - cards, panels */
  --gm-bg-sunken:   var(--gm-footer);  /* inputs, code blocks, segment displays */
  --gm-bg-overlay:  rgba(4, 52, 44, 0.85);  /* modal backdrop */

  /* Text */
  --gm-text-primary:   #ffffff;
  --gm-text-secondary: var(--gm-pls);
  --gm-text-tertiary:  var(--gm-pli);
  --gm-text-muted:     var(--gm-pl);
  --gm-text-inverse:   #ffffff;    /* Text on a brand-colored fill. Stays white across modes. */

  /* Brand accent (semantic) */
  --gm-accent:        var(--gm-pl);    /* default accent (links, focus) */
  --gm-accent-strong: var(--gm-pli);   /* hover, emphasis */
  --gm-accent-fill:   var(--gm-p);     /* primary button fill */
  --gm-accent-hover:  var(--gm-pm);    /* primary button hover fill */

  /* Borders */
  --gm-border-subtle:  rgba(159, 225, 203, 0.12);
  --gm-border-default: rgba(159, 225, 203, 0.22);
  --gm-border-strong:  rgba(159, 225, 203, 0.40);

  /* Status colors */
  --gm-success: var(--gm-pl);      /* #5dcaa5 - GM mint, shared with primary family */
  --gm-warning: #f57c00;            /* POS-aligned orange */
  --gm-warning-light: #ffb74d;      /* POS warning-light - used for gradient tops */
  --gm-warning-dark:  #c26200;      /* Darkened warning - borders, shadow stops */
  --gm-danger:  #fca5a5;            /* Pale red - readable AAA on the deep green base */
  --gm-info:    #5db9e8;            /* Soft blue - readable on dark, distinct from the green family */
  --gm-info-light: #9dd1f0;         /* Lifted variant for accessible mode + icon emphasis */

  /* ----------------------------------------------------------------------
     Light-bg surface tokens

     For future web / giantmonkey.de / gomus.de scopes (hero sections
     stay on the dark base, but dashboard / content sections render on
     white). Values mirror gomus-webseite's surface tokens.
     Status: available, not yet consumed by any component.
     Do not use in haptic contexts.
     ---------------------------------------------------------------------- */
  --gm-bg-light:     #ffffff;
  --gm-bg-light-alt: #f5f5f4;     /* matches --gm-g1 */
  --gm-text-on-light:           var(--gm-g9);   /* primary text on light */
  --gm-text-on-light-muted:     var(--gm-g7);   /* secondary text on light */
  --gm-text-on-light-tertiary:  var(--gm-g5);   /* tertiary text on pure white only */
  --gm-border-on-light:         var(--gm-g2);   /* default border on light */
}