/* ============================================================================
 *  GPU Admin Panel - Design Tokens
 *  -------------------------------------------------------------------------
 *  Foundation layer for the new ui-* component system. Layered on top of
 *  panel.css and loaded BEFORE ui-shell.css / ui-components.css.
 *
 *  This file contains:
 *    - Width tier tokens for .page-shell modifiers
 *    - Motion duration tokens (--motion-*)
 *    - Elevation tokens (--elevation-*) with dark-theme overrides
 *    - Control height tokens (--control-height-*)
 *    - Z-index ladder (extends panel.css --z-nav / --z-toast)
 *    - --space-*  aliases that forward to legacy --sp-*  in panel.css
 *    - --type-*   aliases that forward to legacy --fs-*  in panel.css
 *    - --color-*  aliases that forward to legacy --c-*   in panel.css
 *
 *  Direction of aliasing: NEW token name -> LEGACY token name. Legacy code
 *  in panel.css and placeholder.css keeps using --sp-* / --fs-* / --c-*
 *  unchanged. New ui-* code uses --space-* / --type-* / --color-*.
 *
 *  See docs/UI_SYSTEM.md for the full token catalog and usage rules.
 * ========================================================================== */

:root {
    /* --- Spacing (4px scale) -------------------------------------------- */
    --space-0:  0;
    --space-1:  var(--sp-1);
    --space-2:  var(--sp-2);
    --space-3:  var(--sp-3);
    --space-4:  var(--sp-4);
    --space-5:  var(--sp-5);
    --space-6:  var(--sp-6);
    --space-7:  28px;
    --space-8:  var(--sp-8);
    --space-10: var(--sp-10);
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* --- Type scale ----------------------------------------------------- */
    --type-xs:   var(--fs-xs);
    --type-sm:   var(--fs-sm);
    --type-base: var(--fs-base);
    --type-md:   var(--fs-md);
    --type-lg:   var(--fs-lg);
    --type-xl:   var(--fs-xl);
    --type-2xl:  var(--fs-2xl);
    --type-3xl:  1.875rem;

    --type-weight-regular:  400;
    --type-weight-medium:   500;
    --type-weight-semibold: 600;
    --type-weight-bold:     700;

    --type-leading-tight:  1.2;
    --type-leading-normal: 1.5;
    --type-leading-loose:  1.75;

    /* --- Width tiers (page-shell modifiers) ----------------------------- *
     *  narrow  : forms, focused detail edits
     *  content : default; settings, single-record reads
     *  data    : audit, health, long lists
     *  full    : workspace pages (Library / Photos / Videos / Galleries) -
     *            no max-width is applied; .page-shell--full lets the
     *            workspace own its own gutters.                            */
    --width-narrow:  720px;
    --width-content: 960px;
    --width-data:    1280px;

    /* --- Motion --------------------------------------------------------- *
     *  Canonical durations + easings. Legacy --ease / --ease-fast /
     *  --ease-soft remain in panel.css for legacy class consumers.         */
    --motion-fast:     0.12s ease;
    --motion-base:     0.20s ease;
    --motion-soft:     0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
    --motion-emphasis: 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* --- Elevation ------------------------------------------------------ *
     *  Named steps. --elevation-1/2/3 mirror legacy --shadow-sm/--shadow
     *  /--shadow-md but are independently theme-overridable below.         */
    --elevation-0: none;
    --elevation-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
    --elevation-2: 0 6px 14px rgba(15, 23, 42, 0.09);
    --elevation-3: 0 14px 30px rgba(15, 23, 42, 0.14);
    --elevation-4: 0 24px 48px rgba(15, 23, 42, 0.18);

    /* --- Control heights ------------------------------------------------ *
     *  Used by ui-button, ui-input, ui-select, ui-iconbutton.              */
    --control-height-sm: 28px;
    --control-height-md: 36px;
    --control-height-lg: 44px;

    /* --- Z-index ladder ------------------------------------------------- *
     *  Extends panel.css --z-nav (350) and --z-toast (400). The legacy
     *  values are intentionally preserved here so the ladder is complete
     *  in one place for new code. panel.css declares its own --z-nav /
     *  --z-toast on :root; both definitions resolve to identical values.   */
    --z-base:    1;
    --z-sticky:  100;
    --z-popover: 300;
    --z-modal:   500;
    --z-tooltip: 600;

    /* --- Color aliases -------------------------------------------------- *
     *  --color-* names forward to the panel.css --c-* tokens. Dark-mode
     *  overrides are inherited automatically because the --c-* targets
     *  are themselves overridden in [data-theme="dark"] in panel.css.      */
    --color-bg:               var(--c-bg);
    --color-surface:          var(--c-surface);
    --color-surface-raised:   var(--c-surface-raised);
    --color-text:             var(--c-text);
    --color-text-muted:       var(--c-text-muted);
    --color-text-soft:        var(--c-text-soft);
    --color-hover:            var(--c-hover);
    --color-border:           var(--c-border);
    --color-primary:          var(--c-primary);
    --color-primary-dark:     var(--c-primary-dark);
    --color-primary-light:    var(--c-primary-light);
    --color-primary-hover-bg: var(--c-primary-hover-bg);
    --color-on-primary:       var(--c-on-primary);
    --color-success:          var(--c-success);
    --color-success-light:    var(--c-success-light);
    --color-success-border:   var(--c-success-border);
    --color-danger:           var(--c-danger);
    --color-danger-dark:      var(--c-danger-dark);
    --color-danger-light:     var(--c-danger-light);
    --color-danger-border:    var(--c-danger-border);
    --color-warning:          var(--c-warning);
    --color-warning-light:    var(--c-warning-light);
    --color-warning-border:   var(--c-warning-border);
    --color-focus-ring:       var(--c-focus-ring);
}

/* Dark theme: only elevation overrides need declaring here. The --color-*
 * aliases follow panel.css automatically because their --c-* targets are
 * dark-overridden upstream. */
[data-theme="dark"] {
    --elevation-1: 0 1px 2px rgba(2, 6, 23, 0.5), 0 1px 1px rgba(2, 6, 23, 0.35);
    --elevation-2: 0 8px 18px rgba(2, 6, 23, 0.5);
    --elevation-3: 0 16px 34px rgba(2, 6, 23, 0.62);
    --elevation-4: 0 24px 48px rgba(2, 6, 23, 0.72);
}