/* ===========================================================================
   Garlic Media - Colour tokens

   The palette from Section 6 of the brand guidelines, as importable tokens.
   Pair with Typography/garlic-media-typography.css.

       @import "Brand Identity/garlic-media-colour.css";
       @import "Brand Identity/Typography/garlic-media-typography.css";

   Two layers:
     --gm-*        raw palette. Fixed values. Do not redefine.
     --app-*       semantic roles. Redefined per theme. Build UI against these.

   Contrast, measured against WCAG 2.1 for normal text:
     white on blue    6.63:1  AA
     blue on white    6.63:1  AA
     black on white  21.00:1  AAA
     white on black  21.00:1  AAA
     blue on black    3.17:1  FAILS - never set blue text on black
     black on blue    3.17:1  FAILS
   =========================================================================== */

:root {
  /* --- Core. These three appear in the logo files and are non-negotiable. -- */
  --gm-blue:              #1F4FD8;
  --gm-black:             #000000;
  --gm-white:             #FFFFFF;

  /* --- Blue ramp. Interface states only. ----------------------------------
     The logo only ever uses --gm-blue (Blue 500). Never render the mark in
     any other step of this ramp. */
  --gm-blue-50:           #EEF2FE;
  --gm-blue-100:          #D6E0FC;
  --gm-blue-300:          #7E9BEE;
  --gm-blue-500:          #1F4FD8;
  --gm-blue-700:          #1638A6;
  --gm-blue-900:          #0E2570;

  /* --- Neutrals. Biased very slightly toward blue so they sit with the
     accent rather than fighting it. Never use for the logo. ---------------- */
  --gm-ink-900:           #0C0F16;
  --gm-ink-600:           #545B6A;
  --gm-ink-400:           #878EA0;
  --gm-line-200:          #DCE1E9;
  --gm-paper:             #F4F6F9;

  /* --- Semantic. Not brand colours; kept deliberately separate from the
     accent so status never competes with identity. ------------------------- */
  --gm-success:           #1B7F4B;
  --gm-success-bg:        #E6F4EC;
  --gm-warning:           #8A5A00;
  --gm-warning-bg:        #FBF0DC;
  --gm-danger:            #B3261E;
  --gm-danger-bg:         #FBE9E7;

  /* --- Roles. Build against these, not the raw palette. ------------------- */
  --app-bg:               var(--gm-paper);
  --app-surface:          var(--gm-white);
  --app-surface-raised:   var(--gm-white);
  --app-surface-sunken:   #EAEEF4;

  --app-text:             var(--gm-ink-900);
  --app-text-muted:       var(--gm-ink-600);
  --app-text-subtle:      var(--gm-ink-400);
  --app-text-on-accent:   var(--gm-white);

  --app-border:           var(--gm-line-200);
  --app-border-strong:    #C7CEDB;

  --app-accent:           var(--gm-blue);
  --app-accent-hover:     var(--gm-blue-700);
  --app-accent-active:    var(--gm-blue-900);
  --app-accent-subtle:    var(--gm-blue-50);
  --app-accent-text:      #1A44BC;   /* blue text on light, keeps AA */

  --app-focus-ring:       var(--gm-blue);
  --app-selection:        var(--gm-blue-100);
}

/* --- Dark. Redefine roles only, never the raw palette. --------------------
   The accent stays --gm-blue so brand surfaces match exactly. Blue TEXT on
   dark lifts to Blue 300, because --gm-blue on a dark ground fails contrast. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-bg:             #090B10;
    --app-surface:        #12161F;
    --app-surface-raised: #1A1F2B;
    --app-surface-sunken: #0E121A;

    --app-text:           #E8EBF1;
    --app-text-muted:     #A0A7B6;
    --app-text-subtle:    #737A8A;

    --app-border:         #242A38;
    --app-border-strong:  #333B4D;

    --app-accent-subtle:  #141B33;
    --app-accent-text:    var(--gm-blue-300);

    --gm-success:         #6FD79E;  --gm-success-bg: #10231A;
    --gm-warning:         #E5B25C;  --gm-warning-bg: #241C0B;
    --gm-danger:          #F1837A;  --gm-danger-bg:  #241110;
  }
}

:root[data-theme="dark"] {
  --app-bg:               #090B10;
  --app-surface:          #12161F;
  --app-surface-raised:   #1A1F2B;
  --app-surface-sunken:   #0E121A;

  --app-text:             #E8EBF1;
  --app-text-muted:       #A0A7B6;
  --app-text-subtle:      #737A8A;

  --app-border:           #242A38;
  --app-border-strong:    #333B4D;

  --app-accent-subtle:    #141B33;
  --app-accent-text:      var(--gm-blue-300);

  --gm-success:           #6FD79E;  --gm-success-bg: #10231A;
  --gm-warning:           #E5B25C;  --gm-warning-bg: #241C0B;
  --gm-danger:            #F1837A;  --gm-danger-bg:  #241110;
}