/*
 * tokens.css
 *
 * Copyright (c) 2001-2026 Gamma Technologies, LLC. All Rights Reserved.
 *
 * -----------------------------------------------------------------------------
 * GT-Play  -  design tokens (single source of truth for the whole theme)
 * -----------------------------------------------------------------------------
 * This file is IDENTICAL in gtplay/login, gtplay/account and gtplay/admin.
 * Keycloak cannot share one resource across theme types, so it is duplicated.
 * After editing, re-sync the copies (see gtplay/README.md) and verify with:
 *
 *   md5sum gtplay/login/resources/css/tokens.css \
 *          gtplay/account/resources/css/tokens.css \
 *          gtplay/admin/resources/css/tokens.css
 *
 * It declares values only - no selectors other than :root - so it is safe to
 * load first and map onto PatternFly variables from styles.css afterwards.
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
   1.  BRAND SCALE  -  fixed values sampled from the GT-Play UI.
       These never change between light and dark mode.
   ============================================================================= */
:root {
  /* Navy - page chrome, sidebar, login backdrop */
  --gt-navy-950: #061426;
  --gt-navy-900: #081b3c;
  --gt-navy-800: #0d244c;   /* GT-Play sidebar                                */
  --gt-navy-700: #132d5e;
  --gt-navy-600: #1c3c7e;   /* login gradient, far corner                     */

  /* Blue - primary action colour */
  --gt-blue-800: #16306a;
  --gt-blue-700: #1e3f86;
  --gt-blue-600: #2b55b1;   /* GT-Play primary                                */
  --gt-blue-500: #3a68c9;
  --gt-blue-400: #4272d2;
  --gt-blue-300: #82a9f0;
  --gt-blue-200: #c5cfe4;
  --gt-blue-100: #e1e7f3;
  --gt-blue-50:  #f1f4fa;

  /* Green - GT-Play logo mark, "success" / "Completed" */
  --gt-green-700: #1f4c1c;
  --gt-green-600: #2e7029;
  --gt-green-500: #3a7c35;  /* GT-Play status label                           */
  --gt-green-400: #489d50;  /* GT-Play logo mark                              */
  --gt-green-300: #79d26f;
  --gt-green-200: #bfdcbb;
  --gt-green-50:  #eef6ed;

  /* Amber - "warning" / "New version available" */
  --gt-amber-700: #33260b;
  --gt-amber-600: #8a5300;
  --gt-amber-400: #f5a120;  /* GT-Play status label                           */
  --gt-amber-300: #f6c25c;
  --gt-amber-200: #f2d49a;
  --gt-amber-50:  #fdf3e3;

  /* Red - "danger" / "Aborted" */
  --gt-red-800: #3a1512;
  --gt-red-700: #890f07;    /* GT-Play "Aborted" label                        */
  --gt-red-600: #b3170c;
  --gt-red-500: #db1f12;    /* GT-Play destructive action                     */
  --gt-red-300: #ff8a7e;
  --gt-red-200: #f2c2bd;
  --gt-red-50:  #fcebe9;

  /* Neutrals */
  --gt-ink:      #231f20;   /* GT-Play body text                              */
  --gt-gray-600: #58595b;   /* GT-Play muted text / logo outline              */
  --gt-gray-500: #76787b;
  --gt-gray-400: #a9acb3;
  --gt-gray-300: #c2c7d0;
  --gt-gray-200: #dcdfe5;   /* GT-Play border / active nav pill               */
  --gt-gray-100: #edeff3;
  --gt-gray-50:  #f7f8fa;   /* GT-Play toolbar / page tint                    */
  --gt-white:    #ffffff;

  /* Slate - dark-mode surfaces, navy-tinted so dark mode stays on brand */
  --gt-slate-900: #0a1628;
  --gt-slate-850: #0e1b30;
  --gt-slate-800: #0f1c31;
  --gt-slate-700: #132139;
  --gt-slate-600: #17263f;
  --gt-slate-500: #1b2b47;
  --gt-slate-400: #1e3358;
  --gt-slate-300: #2b3e5e;
  --gt-slate-200: #435c85;
}

/* =============================================================================
   2.  SHAPE, TYPE & MOTION  -  mode independent
   ============================================================================= */
:root {
  --gt-font:      "Inter", "Red Hat Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gt-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace;

  --gt-radius-xs: 4px;
  --gt-radius-sm: 6px;
  --gt-radius-md: 8px;
  --gt-radius-lg: 12px;
  --gt-radius-pill: 999px;

  --gt-ring-width: 3px;
  --gt-transition: 150ms cubic-bezier(.4, 0, .2, 1);
}

/* =============================================================================
   3.  SEMANTIC TOKENS  -  LIGHT MODE (default)
   -----------------------------------------------------------------------------
   MODE SELECTORS
   Dark mode is keyed off *either* marker:
     [data-theme="dark"]  - written by our own toggle (script.js)
     .pf-v5-theme-dark    - written by Keycloak's own render-blocking script in
                            index.ftl, from prefers-color-scheme
   Honouring Keycloak's class means the very first paint is already dark for a
   user whose OS is dark, so there is no flash of light theme before our
   (deferred, module) script runs.  script.js then keeps both markers in sync.
   The two selectors below are mutually exclusive by construction.
   ============================================================================= */
:root:not([data-theme="dark"]):not(.pf-v5-theme-dark) {
  /* Surfaces */
  --gt-bg:             var(--gt-gray-50);
  --gt-bg-subtle:      var(--gt-gray-100);
  --gt-surface:        var(--gt-white);
  --gt-surface-raised: var(--gt-white);
  --gt-surface-hover:  var(--gt-gray-100);
  --gt-surface-active: var(--gt-blue-50);
  --gt-surface-inset:  var(--gt-gray-50);

  /* Borders */
  --gt-border:         var(--gt-gray-200);
  --gt-border-subtle:  var(--gt-gray-100);
  --gt-border-strong:  var(--gt-gray-300);

  /* Text  (fg 16.3:1, muted 7.0:1 against --gt-surface) */
  --gt-fg:             var(--gt-ink);
  --gt-fg-muted:       var(--gt-gray-600);
  --gt-fg-subtle:      var(--gt-gray-500);
  --gt-fg-disabled:    var(--gt-gray-400);

  /* Accent  -  links, current-item marks, icons.  Must read as TEXT on
     --gt-surface, so it is the darker end of the blue ramp here (6.9:1). */
  --gt-accent:         var(--gt-blue-600);
  --gt-accent-hover:   var(--gt-blue-700);
  --gt-accent-soft:    var(--gt-blue-100);
  --gt-accent-softer:  var(--gt-blue-50);
  --gt-accent-fg:      var(--gt-white);
  --gt-focus-ring:     rgba(43, 85, 177, .32);

  /* Primary FILL  -  the background of a solid button, which carries
     --gt-primary-fg on top of it.  Deliberately separate from --gt-accent:
     in dark mode the accent has to get lighter to stay legible as text, but a
     filled button has to stay dark enough to keep white text readable. */
  --gt-primary-bg:        var(--gt-blue-600);   /* white on it: 6.9:1        */
  --gt-primary-bg-hover:  var(--gt-blue-700);   /* white on it: 10.0:1       */
  --gt-primary-bg-active: var(--gt-blue-800);
  --gt-primary-fg:        var(--gt-white);

  /* Status  (every foreground is >= 5.4:1 against its own tint) */
  --gt-success-fg:     var(--gt-green-600);
  --gt-success-bg:     var(--gt-green-50);
  --gt-success-border: var(--gt-green-200);
  --gt-success-icon:   var(--gt-green-500);

  --gt-warning-fg:     var(--gt-amber-600);
  --gt-warning-bg:     var(--gt-amber-50);
  --gt-warning-border: var(--gt-amber-200);
  --gt-warning-icon:   var(--gt-amber-600);

  --gt-danger-fg:      var(--gt-red-600);
  --gt-danger-bg:      var(--gt-red-50);
  --gt-danger-border:  var(--gt-red-200);
  --gt-danger-icon:    var(--gt-red-600);

  --gt-info-fg:        var(--gt-blue-600);
  --gt-info-bg:        var(--gt-blue-50);
  --gt-info-border:    var(--gt-blue-200);
  --gt-info-icon:      var(--gt-blue-600);

  /* Destructive FILL  -  same split as --gt-primary-bg vs --gt-accent: the
     solid Delete button needs a background dark enough for white text, which
     --gt-danger-fg is not once it lightens for dark mode. */
  --gt-danger-bg-solid:       var(--gt-red-600);   /* white on it: 6.9:1     */
  --gt-danger-bg-solid-hover: var(--gt-red-700);   /* white on it: 9.8:1     */
  --gt-danger-solid-fg:       var(--gt-white);

  /* Neutral chip / label */
  --gt-neutral-fg:     var(--gt-gray-600);
  --gt-neutral-bg:     var(--gt-gray-100);
  --gt-neutral-border: var(--gt-gray-200);

  /* Left navigation  -  GT-Play navy sidebar with a light active pill */
  --gt-nav-bg:          var(--gt-navy-800);
  --gt-nav-border:      rgba(255, 255, 255, .08);
  --gt-nav-fg:          #e4eaf4;                 /* 12.7:1 on navy           */
  --gt-nav-fg-hover:    var(--gt-white);
  --gt-nav-hover-bg:    rgba(255, 255, 255, .10);
  --gt-nav-active-bg:   var(--gt-gray-200);
  --gt-nav-active-fg:   var(--gt-navy-800);      /* 11.5:1 on the pill       */
  --gt-nav-section-fg:  #9fb2d0;                 /* 6.7:1 on navy            */

  /* Masthead */
  --gt-masthead-bg:     var(--gt-white);
  --gt-masthead-fg:     var(--gt-ink);
  --gt-masthead-border: var(--gt-gray-200);

  /* Login page */
  --gt-login-bg-from:     var(--gt-navy-900);
  --gt-login-bg-mid:      var(--gt-navy-700);
  --gt-login-bg-to:       var(--gt-navy-600);
  --gt-login-card-bg:     #e8ebf0;               /* sampled from GT-Play     */
  --gt-login-card-border: #d3d9e4;
  --gt-login-input-bg:    var(--gt-white);
  --gt-login-title-fg:    var(--gt-white);

  /* Elevation */
  --gt-shadow-sm: 0 1px 2px rgba(13, 36, 76, .08), 0 1px 3px rgba(13, 36, 76, .06);
  --gt-shadow-md: 0 2px 6px rgba(13, 36, 76, .10), 0 6px 16px rgba(13, 36, 76, .08);
  --gt-shadow-lg: 0 8px 24px rgba(13, 36, 76, .14), 0 2px 6px rgba(13, 36, 76, .08);

  color-scheme: light;
}

/* =============================================================================
   4.  SEMANTIC TOKENS  -  DARK MODE
       Navy-tinted rather than neutral black so the product still reads as
       GT-Play.  Every foreground pair below is >= 4.6:1, most are >= 7:1.
   ============================================================================= */
:root[data-theme="dark"],
:root.pf-v5-theme-dark {
  --gt-bg:             var(--gt-slate-900);
  --gt-bg-subtle:      var(--gt-slate-800);
  --gt-surface:        var(--gt-slate-700);
  --gt-surface-raised: var(--gt-slate-600);
  --gt-surface-hover:  var(--gt-slate-500);
  --gt-surface-active: var(--gt-slate-400);
  --gt-surface-inset:  var(--gt-slate-850);

  --gt-border:         var(--gt-slate-300);
  --gt-border-subtle:  var(--gt-slate-600);
  --gt-border-strong:  var(--gt-slate-200);

  /* fg 16.0:1, muted 9.0:1 against --gt-bg  (the old theme sat at 6.3:1) */
  --gt-fg:             #edf1f7;
  --gt-fg-muted:       #a8b8d0;
  --gt-fg-subtle:      #8b9cb8;
  --gt-fg-disabled:    #6a7b96;

  /* Accent as TEXT on the dark surfaces: 7.7:1 on --gt-bg, 6.8:1 on --gt-surface */
  --gt-accent:         var(--gt-blue-300);
  --gt-accent-hover:   #a6c3f7;
  --gt-accent-soft:    #1b2e52;
  --gt-accent-softer:  var(--gt-slate-600);
  --gt-accent-fg:      var(--gt-white);
  --gt-focus-ring:     rgba(130, 169, 240, .40);

  /* Primary FILL stays mid-blue in dark mode so white text still passes AA:
     white on --gt-blue-500 is 5.3:1 and on --gt-blue-400 4.6:1.  Using
     --gt-accent here instead would give white-on-#82a9f0 at 2.3:1. */
  --gt-primary-bg:        var(--gt-blue-500);
  --gt-primary-bg-hover:  var(--gt-blue-400);
  --gt-primary-bg-active: #2e56a8;
  --gt-primary-fg:        var(--gt-white);

  --gt-success-fg:     var(--gt-green-300);
  --gt-success-bg:     #14301a;
  --gt-success-border: #2c5b2e;
  --gt-success-icon:   var(--gt-green-300);

  --gt-warning-fg:     var(--gt-amber-300);
  --gt-warning-bg:     var(--gt-amber-700);
  --gt-warning-border: #6b5218;
  --gt-warning-icon:   var(--gt-amber-300);

  --gt-danger-fg:      var(--gt-red-300);
  --gt-danger-bg:      var(--gt-red-800);
  --gt-danger-border:  #7a2a23;
  --gt-danger-icon:    var(--gt-red-300);

  --gt-info-fg:        var(--gt-blue-300);
  --gt-info-bg:        #152947;
  --gt-info-border:    #2e4877;
  --gt-info-icon:      var(--gt-blue-300);

  /* Stays a deep red in dark mode: white on #a81f14 is 7.3:1, and the fill is
     still 2.5:1 against the page so the button reads as a distinct surface.
     Using --gt-danger-fg (#ff8a7e) here would give white-on-salmon at 2.3:1. */
  --gt-danger-bg-solid:       #a81f14;
  --gt-danger-bg-solid-hover: #c0281a;
  --gt-danger-solid-fg:       var(--gt-white);

  --gt-neutral-fg:     #a8b8d0;
  --gt-neutral-bg:     var(--gt-slate-600);
  --gt-neutral-border: var(--gt-slate-300);

  --gt-nav-bg:          #071120;
  --gt-nav-border:      rgba(255, 255, 255, .07);
  --gt-nav-fg:          #c6d3e8;                 /* 12.5:1                   */
  --gt-nav-fg-hover:    var(--gt-white);
  --gt-nav-hover-bg:    rgba(255, 255, 255, .08);
  --gt-nav-active-bg:   var(--gt-slate-400);
  --gt-nav-active-fg:   var(--gt-white);          /* 12.6:1                  */
  --gt-nav-section-fg:  #8ba0c2;

  --gt-masthead-bg:     var(--gt-slate-850);
  --gt-masthead-fg:     #edf1f7;
  --gt-masthead-border: var(--gt-slate-300);

  --gt-login-bg-from:     #050d1a;
  --gt-login-bg-mid:      var(--gt-navy-950);
  --gt-login-bg-to:       #0b2044;
  --gt-login-card-bg:     var(--gt-slate-700);
  --gt-login-card-border: var(--gt-slate-300);
  --gt-login-input-bg:    var(--gt-slate-850);
  --gt-login-title-fg:    #edf1f7;

  --gt-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .30);
  --gt-shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 6px 16px rgba(0, 0, 0, .35);
  --gt-shadow-lg: 0 8px 24px rgba(0, 0, 0, .50), 0 2px 6px rgba(0, 0, 0, .40);

  color-scheme: dark;
}