/* =============================================================================
 * Adalysis design tokens — single source of truth for the UI system.
 *
 * These CSS custom properties are the canonical design values. They are consumed
 * directly by the static (non-GWT) stylesheets and by new semantic component
 * classes. NOTE: GWT-compiled CssResource files CANNOT read var() (the legacy/GSS
 * parser rejects the `--` token), so the same values are mirrored as @def
 * constants in the shared GWT token bundle — keep the two in sync.
 *
 * STATUS: Phase 1B (pure refactor). Token NAMES/STRUCTURE are stable; VALUES are
 * provisional, seeded from the codebase audit, and will be finalised in Phase 2
 * against the reference mockups by editing THIS FILE only.
 * ============================================================================= */

:root {
    /* ---------------------------------------------------------------------
     * Brand & status colors  (anchored on the existing color.css @def set,
     * which the audit confirmed are the most-used values)
     * ------------------------------------------------------------------- */
    --ada-color-primary:         #0570E7;  /* blue / links (most-used brand color) */
    --ada-color-primary-dark:    #223D9E;  /* hover / active; canonical for legacy --cl-blue-dark */
    --ada-color-primary-subtle:  #DFF2FF;  /* pale blue background (legacy --cl-blue-light) */
    --ada-color-accent:          #D13A7A;  /* magenta accent (heavily used) */
    --ada-color-purple:          #7551E9;

    /* NOTE: the static (marketing/audit) palette greens/reds differ from the GWT @def palette
     * (@def green #30BD69, red #DE4B4B). These tokens currently hold the STATIC values so the
     * migrated static CSS stays visually identical; final brand green/red to be unified in Phase 2. */
    --ada-color-success:         #68BC34;  /* legacy --cl-green */
    --ada-color-success-dark:    #1C9932;  /* legacy --cl-green-dark */
    --ada-color-danger:          #DD3811;  /* legacy --cl-red */
    --ada-color-warning:         #FFAF24;  /* orange (@def) */
    --ada-color-info:            #439EDB;  /* secondary blue (legacy audit --cl-blue) */

    /* Misc brand colors carried over from the legacy --cl- palette */
    --ada-color-calypso:         #2C5E7D;
    --ada-color-olive:           #9BB000;
    --ada-color-olive-dark:      #8A9E00;
    --ada-color-olive-light:     #FBFFE2;

    /* ---------------------------------------------------------------------
     * Text
     * ------------------------------------------------------------------- */
    --ada-color-text:           #36373C;  /* primary text/headings (dominant dark) */
    --ada-color-text-secondary: #3B495A;  /* secondary text (color.css `text`) */
    --ada-color-text-muted:     #8392A5;  /* muted / placeholder */
    --ada-color-text-inverse:   #FFFFFF;

    /* ---------------------------------------------------------------------
     * Neutral ramp  (collapses the ~11 ad-hoc greys; PROVISIONAL mapping —
     * near-duplicate greys are unified here, to be confirmed vs mockups)
     * ------------------------------------------------------------------- */
    --ada-color-white:  #FFFFFF;
    --ada-grey-50:      #F7F7F9;
    --ada-grey-100:     #F2F2F2;
    --ada-grey-200:     #E8E8E8;
    --ada-grey-300:     #D9E1EB;  /* dominant border/divider color */
    --ada-grey-400:     #CCCCCC;
    --ada-grey-500:     #999999;
    --ada-grey-600:     #666666;
    --ada-grey-700:     #444444;
    --ada-grey-800:     #333333;
    --ada-color-black:  #000000;

    /* Semantic surface/border aliases (reference the ramp) */
    --ada-color-bg:            #FFFFFF;
    --ada-color-bg-subtle:     var(--ada-grey-50);
    --ada-color-border:        var(--ada-grey-300);   /* legacy --cl-border-color #D9E1EB */
    --ada-color-border-subtle: #E6E9EB;               /* legacy --cl-as-gray-border */
    --ada-color-border-strong: var(--ada-grey-400);

    /* ---------------------------------------------------------------------
     * Typography  (standardised on Roboto per decision; px scale collapses
     * the mixed px+rem sizes. Base = 13px, the grid/table default)
     * ------------------------------------------------------------------- */
    --ada-font-family-base: 'Roboto', sans-serif;   /* existing value; ensure Roboto is actually loaded when wiring */
    --ada-font-family-mono: monospace, monospace;   /* existing value (style.css) */
    --ada-font-family-icon: 'adalysis-font';

    --ada-font-size-xs:   11px;
    --ada-font-size-sm:   12px;
    --ada-font-size-base: 13px;
    --ada-font-size-md:   14px;
    --ada-font-size-lg:   16px;
    --ada-font-size-xl:   18px;
    --ada-font-size-2xl:  20px;
    --ada-font-size-3xl:  24px;

    --ada-font-weight-normal: 400;
    --ada-font-weight-medium: 500;
    --ada-font-weight-bold:   700;

    --ada-line-height-tight: 1.2;
    --ada-line-height-base:  1.4;
    --ada-line-height-loose: 1.6;

    /* ---------------------------------------------------------------------
     * Spacing  (4px base scale — matches the common margin/padding values)
     * ------------------------------------------------------------------- */
    --ada-space-0:  0;
    --ada-space-1:  4px;
    --ada-space-2:  8px;
    --ada-space-3:  12px;
    --ada-space-4:  16px;
    --ada-space-5:  20px;
    --ada-space-6:  24px;
    --ada-space-8:  32px;
    --ada-space-10: 40px;
    --ada-space-12: 48px;

    /* ---------------------------------------------------------------------
     * Radius  (collapses 2/3/4/5/6/7/8/10px)
     * ------------------------------------------------------------------- */
    --ada-radius-sm:     3px;
    --ada-radius-md:     4px;
    --ada-radius-lg:     6px;
    --ada-radius-xl:     8px;
    --ada-radius-pill:   9999px;
    --ada-radius-circle: 50%;

    /* ---------------------------------------------------------------------
     * Elevation  (collapses 73 ad-hoc box-shadows; PROVISIONAL values to be
     * tuned against mockups)
     * ------------------------------------------------------------------- */
    --ada-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --ada-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.12);
    --ada-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.16);
    --ada-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.20);

    /* ---------------------------------------------------------------------
     * Z-index layering scale  (replaces ad-hoc 1/2/10/11/20/99/100/101/210)
     * ------------------------------------------------------------------- */
    --ada-z-base:     1;
    --ada-z-dropdown: 100;
    --ada-z-sticky:   200;
    --ada-z-overlay:  1000;
    --ada-z-modal:    1100;
    --ada-z-popup:    1200;
    --ada-z-tooltip:  1300;
}