/* GreenLight workspace design tokens
   --gl-* surface/text/border tokens map to --vp-* for automatic dark mode.
   GreenLight-specific greens use raw hex because they are not in the vp palette. */

:root {
    /* surfaces */
    --gl-bg:             var(--vp-canvas-bg, #f3f3f0);
    --gl-surface:        var(--vp-card-bg, #ffffff);
    --gl-surface-soft:   #f4f3ef;
    --gl-surface-raised: var(--vp-card-bg, #ffffff);

    /* Inverted brand surface (WI-airisk-095-T1). The Step Detail design's deep green
       is a SURFACE role -- the status card, the filled current-breadcrumb pill, the
       response code block. It deliberately does NOT reuse --gl-green-900, which is a
       TEXT color (GreenLightHistory.razor.css:573) whose dark-mode override inverts to
       a light green; overloading it would paint light-on-light in dark mode.
       This family is intentionally theme-stable: like the card it replaces, it stays a
       dark brand statement surface in both themes, so it carries its own foreground
       tokens rather than relying on --gl-text-*. */
    --gl-surface-inverse:    #16261b;
    --gl-on-inverse:         #ffffff;
    --gl-on-inverse-dim:     #9ec2ad;
    --gl-on-inverse-faint:   #7f978a;
    --gl-on-inverse-code:    #cfe8d8;

    /* borders */
    --gl-border:        var(--vp-border-default, #e6e3db);
    --gl-border-strong: var(--vp-border-hover, #d6d2c7);
    --gl-border-muted:  var(--vp-divider, #efece4);

    /* text -- muted/dim retuned to the Step Detail design's neutrals (WI-airisk-095-T1) */
    --gl-text:         var(--vp-content-text, #1c2024);
    --gl-text-muted:   #6b726e;
    --gl-text-dim:     #9aa19c;
    --gl-text-inverse: #ffffff;

    /* GreenLight signature greens */
    --gl-green-900: #0f3d22;
    --gl-green-700: #1d6f3d;
    --gl-green-600: #258049;
    --gl-green-500: #2fa85a;
    --gl-green-400: #4cc474;
    --gl-green-200: #c2e8c9;
    --gl-green-100: #dcebd6;
    --gl-green-50:  #eff6ea;

    /* traffic-light dots -- green/yellow/red retuned to the Step Detail design's hues
       (WI-airisk-095-T1, human decision Q15 option B: global ripple accepted). These
       drive GreenLightStatusPill, GreenLightTrafficLight, and GreenLightTrafficToggle,
       so the retune is visible on every GreenLight surface by design. */
    --gl-light-green:  #36c06a;
    --gl-light-yellow: #e0992a;
    --gl-light-orange: #f5820a;
    --gl-light-red:    #d4564e;
    --gl-light-idle:   #4a4a4a;

    /* Primary action (WI-airisk-095-T1). The design's bright-green button is an ACTION
       role, distinct from the traffic-light dot that happens to share its hue today. */
    --gl-action-bright:     #36c06a;
    --gl-action-bright-ink: #07150c;

    /* status families */
    --gl-amber-600:  #b3791a;
    --gl-amber-100:  #fbecc8;
    --gl-amber-50:   #fdf6e3;
    --gl-red-600:    #b03327;
    --gl-red-100:    #f4d6d2;
    --gl-red-50:     #fbeae7;
    --gl-violet-600: #6b53b3;
    --gl-violet-100: #e0daf0;

    /* radii -- --gl-r-xl2 is the Step Detail design's card radius, which sits between
       the existing lg (16px) and xl (22px) rungs (WI-airisk-095-T1) */
    --gl-r-xs:   6px;
    --gl-r-sm:   8px;
    --gl-r-md:   12px;
    --gl-r-lg:   16px;
    --gl-r-xl2:  18px;
    --gl-r-xl:   22px;
    --gl-r-pill: 999px;

    /* density defaults */
    --gl-pad-card: 18px;
    --gl-pad-row:  16px;
    --gl-row-h:    64px;
    --gl-gap:      14px;

    /* shadows -- --gl-shadow-card is the Step Detail design's two-layer card shadow
       (a hairline plus a long soft lift) (WI-airisk-095-T1) */
    --gl-shadow-sm:   0 1px 0 rgba(20,20,20,.04), 0 1px 2px rgba(20,20,20,.04);
    --gl-shadow:      0 1px 0 rgba(20,20,20,.04), 0 8px 24px rgba(20,20,20,.06);
    --gl-shadow-lg:   0 4px 12px rgba(20,20,20,.06), 0 24px 60px rgba(20,20,20,.10);
    --gl-shadow-card: 0 1px 2px rgba(16,30,20,.04), 0 12px 30px -18px rgba(16,30,20,.18);
}

[data-theme="dark"] {
    --gl-surface-soft:   #1b2026;
    --gl-surface-raised: #1c2127;
    --gl-border-muted:   #232830;
    --gl-text-muted:     #9aa3ae;
    --gl-text-dim:       #6a7280;
    --gl-text-inverse:   #0e1014;

    --gl-green-900: #c2e8c9;
    --gl-green-700: #5ed286;
    --gl-green-600: #43c075;
    --gl-green-500: #34d063;
    --gl-green-200: #1d3e2a;
    --gl-green-100: #16331f;
    --gl-green-50:  #11261a;

    --gl-amber-100: #3a2c12;
    --gl-amber-50:  #2a1f0a;
    --gl-red-100:   #3a1e1a;
    --gl-red-50:    #2a1310;
    --gl-violet-100: #2a2440;

    --gl-shadow-sm:   0 1px 0 rgba(0,0,0,.4);
    --gl-shadow:      0 1px 0 rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
    --gl-shadow-lg:   0 4px 12px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.6);
    --gl-shadow-card: 0 1px 0 rgba(0,0,0,.4), 0 12px 30px -18px rgba(0,0,0,.55);
}

[data-density="compact"] {
    --gl-pad-card: 12px;
    --gl-pad-row:  11px;
    --gl-row-h:    54px;
    --gl-gap:      10px;
}

[data-density="comfy"] {
    --gl-pad-card: 22px;
    --gl-pad-row:  20px;
    --gl-row-h:    76px;
    --gl-gap:      18px;
}