/* 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, #faf9f6);
    --gl-surface:        var(--vp-card-bg, #ffffff);
    --gl-surface-soft:   #f4f3ef;
    --gl-surface-raised: var(--vp-card-bg, #ffffff);

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

    /* text */
    --gl-text:         var(--vp-content-text, #1c2024);
    --gl-text-muted:   #5a6471;
    --gl-text-dim:     #8a8f96;
    --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 */
    --gl-light-green:  #34d063;
    --gl-light-yellow: #e8b020;
    --gl-light-red:    #d8483a;
    --gl-light-idle:   #4a4a4a;

    /* 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-xs:   6px;
    --gl-r-sm:   8px;
    --gl-r-md:   12px;
    --gl-r-lg:   16px;
    --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-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);
}

[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);
}

[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;
}