/* ══════════════════════════════════════════════════════════════════════════════
   ShiftHR Design Token System
   ──────────────────────────────────────────────────────────────────────────────
   All visual values that may be overridden by tenant theming MUST be defined
   here as CSS custom properties. app.css references these tokens — never
   hardcode hex values, px spacing, or font sizes in app.css directly.

   To enable per-tenant theming, IThemeService generates a <style> block that
   overrides specific token values. Because that block appears after this file
   in the cascade, tenant overrides win automatically.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {

    /* ── Brand Colors ──────────────────────────────────────────────────────── */
    --color-brand:           #5B5BD6;
    --color-brand-dark:      #4747C2;
    --color-brand-light:     #EBEBFF;
    --color-accent:          #26C6A2;

    /* ── Neutral Scale ─────────────────────────────────────────────────────── */
    --color-neutral-50:      #FAFAFA;
    --color-neutral-100:     #F4F4F5;
    --color-neutral-200:     #E4E4E7;
    --color-neutral-300:     #D4D4D8;
    --color-neutral-400:     #A1A1AA;
    --color-neutral-500:     #71717A;
    --color-neutral-600:     #52525B;
    --color-neutral-700:     #3F3F46;
    --color-neutral-800:     #27272A;
    --color-neutral-900:     #18181B;

    /* ── Semantic: Error ───────────────────────────────────────────────────── */
    --color-error:           #EF4444;
    --color-error-light:     #FEF2F2;
    --color-error-border:    #FECACA;
    --color-error-text:      #991B1B;

    /* ── Semantic: Warning ─────────────────────────────────────────────────── */
    --color-warning:         #F59E0B;
    --color-warning-light:   #FFFBEB;
    --color-warning-border:  #FDE68A;
    --color-warning-text:    #92400E;

    /* ── Semantic: Success ─────────────────────────────────────────────────── */
    --color-success:         #22C55E;
    --color-success-light:   #DCFCE7;
    --color-success-border:  #86EFAC;
    --color-success-text:    #166534;

    /* ── Semantic: Info ─────────────────────────────────────────────────────── */
    --color-info-light:      #DBEAFE;
    --color-info-border:     #BFDBFE;
    --color-info-text:       #1E40AF;

    /* ── Semantic: Purple (roles, departments, OKR) ────────────────────────── */
    --color-purple:          #7C3AED;
    --color-purple-light:    #F3E8FF;
    --color-purple-dark:     #4338CA;
    --color-purple-muted:    #E0E7FF;

    /* ── Semantic: Pink (cascade values, contractor) ───────────────────────── */
    --color-pink-light:      #FCE7F3;
    --color-pink-text:       #9D174D;

    /* ── Semantic: Amber (invitations, individual goals) ───────────────────── */
    --color-amber-light:     #FEF3C7;
    --color-amber-alt:       #FEF9C3;
    --color-amber-text:      #92400E;
    --color-amber-accent:    #D97706;

    /* ── Surface Colors ────────────────────────────────────────────────────── */
    --color-surface:         #FFFFFF;
    --color-surface-raised:  #FFFFFF;
    --color-surface-sunken:  var(--color-neutral-50);
    --color-surface-overlay: rgba(0, 0, 0, 0.5);
    --color-surface-frosted: rgba(255, 255, 255, 0.9);

    /* ── Border Colors ─────────────────────────────────────────────────────── */
    --color-border:          var(--color-neutral-200);
    --color-border-light:    var(--color-neutral-100);
    --color-border-brand:    #C7C7FF;

    /* ── Dev Banner & Dev Tools ───────────────────────────────────────────── */
    --color-dev-bg:          #FFF8E1;
    --color-dev-border:      #FFE082;
    --color-dev-text:        #7A5C00;
    --color-dev-accent:      #FF9800;

    /* ── Spacing Scale ─────────────────────────────────────────────────────── */
    --space-1:               4px;
    --space-2:               8px;
    --space-3:               12px;
    --space-4:               16px;
    --space-5:               20px;
    --space-6:               24px;
    --space-7:               28px;
    --space-8:               32px;
    --space-10:              40px;
    --space-12:              48px;
    --space-16:              64px;
    --space-20:              80px;

    /* ── Typography Scale ──────────────────────────────────────────────────── */
    --text-2xs:              .6rem;
    --text-xs:               .65rem;
    --text-sm:               .75rem;
    --text-base:             .875rem;
    --text-md:               .9rem;
    --text-lg:               1rem;
    --text-xl:               1.15rem;
    --text-2xl:              1.3rem;
    --text-3xl:              1.6rem;
    --text-4xl:              1.8rem;

    /* ── Font Weights ──────────────────────────────────────────────────────── */
    --font-normal:           400;
    --font-medium:           500;
    --font-semibold:         600;
    --font-bold:             700;
    --font-extra:            800;

    /* ── Border Radius ─────────────────────────────────────────────────────── */
    --radius-sm:             4px;
    --radius-md:             8px;
    --radius-lg:             12px;
    --radius-pill:           99px;
    --radius-full:           50%;

    /* ── Shadows ───────────────────────────────────────────────────────────── */
    --shadow-sm:             0 1px 3px rgb(0 0 0 / .08);
    --shadow-md:             0 4px 12px rgb(0 0 0 / .10);
    --shadow-lg:             0 8px 32px rgb(0 0 0 / .15);

    /* ── Layout ────────────────────────────────────────────────────────────── */
    --sidebar-width:         220px;
    --header-height:         56px;
    --content-max-width:     1200px;
    --content-padding:       var(--space-8);

    /* ── Transitions ───────────────────────────────────────────────────────── */
    --transition-fast:       .15s ease;
    --transition-normal:     .2s ease;
    --transition-slow:       .3s ease;

    /* ── Badge: Role ───────────────────────────────────────────────────────── */
    --badge-role-admin-bg:   var(--color-purple-light);
    --badge-role-admin-text: var(--color-purple);
    --badge-role-mgr-bg:     var(--color-info-light);
    --badge-role-mgr-text:   #2563EB;
    --badge-role-emp-bg:     var(--color-neutral-100);
    --badge-role-emp-text:   var(--color-neutral-700);

    /* ── Badge: Status ─────────────────────────────────────────────────────── */
    --badge-active-bg:       var(--color-success-light);
    --badge-active-text:     #16A34A;
    --badge-invited-bg:      var(--color-amber-alt);
    --badge-invited-text:    var(--color-amber-text);
    --badge-deactivated-bg:  var(--color-error-light);
    --badge-deactivated-text: var(--color-error-text);

    /* ── Progress Bar ──────────────────────────────────────────────────────── */
    --progress-green:        var(--color-success);
    --progress-yellow:       #EAB308;
    --progress-red:          var(--color-error);

    /* ── Legacy Aliases ────────────────────────────────────────────────────────
       Earlier stylesheets (strategy.css, etc.) were written against a different
       naming scheme. These aliases map the legacy names to the canonical tokens
       so the old stylesheets inherit dark-mode overrides automatically without
       a 90+ line mass rename. Prefer the canonical names in new CSS. */
    --accent-muted:          var(--color-purple-muted);
    --accent-primary:        var(--color-brand);
    --border-light:           var(--color-border-light);
    --info-bg:               var(--color-info-light);
    --info-text:             var(--color-info-text);
    --link-color:            var(--color-brand);
    --muted-bg:              var(--color-surface-sunken);
    --muted-text:            var(--color-neutral-500);
    --success-bg:            var(--color-success-light);
    --success-text:          var(--color-success-text);
    --surface-elevated:      var(--color-surface-raised);
    --surface-subtle:        var(--color-surface-sunken);
    --text-muted:            var(--color-neutral-500);
    --text-primary:          var(--color-neutral-900);
    --text-secondary:        var(--color-neutral-600);
    --text-tertiary:         var(--color-neutral-500);
    --warning-bg:            var(--color-warning-light);
    --warning-text:          var(--color-warning-text);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Dark Theme Overrides
   ──────────────────────────────────────────────────────────────────────────────
   Applied when the AppLayout's root container carries data-theme="dark". The
   theme picker sets this directly; the "system" preference defers to the
   prefers-color-scheme media query at the bottom of this file.

   Semantic names (--color-surface, --color-text, etc.) stay stable — only hex
   values change. Do NOT introduce new tokens here that don't exist in :root,
   and do NOT change structural tokens (spacing, radius, typography) per theme.
   ══════════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
    /* Neutral scale: inverted so --neutral-900 is now near-white (text) and
       --neutral-50 is near-black (deep background). Tenants that override
       the scale from ThemeCssGenerator still get a sensible inverted default. */
    --color-neutral-50:      #18181B;
    --color-neutral-100:     #27272A;
    --color-neutral-200:     #3F3F46;
    --color-neutral-300:     #52525B;
    --color-neutral-400:     #71717A;
    --color-neutral-500:     #A1A1AA;
    --color-neutral-600:     #D4D4D8;
    --color-neutral-700:     #E4E4E7;
    --color-neutral-800:     #F4F4F5;
    --color-neutral-900:     #FAFAFA;

    /* Brand: keep hue, tweak for dark-surface contrast. */
    --color-brand-light:     #2E2E6B;

    /* Surfaces */
    --color-surface:         #0F0F14;
    --color-surface-raised:  #18181B;
    --color-surface-sunken:  #09090B;
    --color-surface-overlay: rgba(0, 0, 0, 0.7);
    --color-surface-frosted: rgba(24, 24, 27, 0.9);

    /* Borders */
    --color-border:          var(--color-neutral-200);
    --color-border-light:    var(--color-neutral-100);
    --color-border-brand:    #4747C2;

    /* Semantic backgrounds: muted dark tints instead of the light pastel
       versions used on light mode. Keep the main hue + text consistent so
       meaning survives. */
    --color-error-light:     #3F1D1D;
    --color-error-border:    #7F1D1D;
    --color-error-text:      #FCA5A5;

    --color-warning-light:   #3B2F12;
    --color-warning-border:  #78350F;
    --color-warning-text:    #FCD34D;

    --color-success-light:   #14351F;
    --color-success-border:  #166534;
    --color-success-text:    #86EFAC;

    --color-info-light:      #1E2A4B;
    --color-info-border:     #1E40AF;
    --color-info-text:       #BFDBFE;

    --color-purple-light:    #3B1E63;
    --color-purple-muted:    #2E2458;
    --color-pink-light:      #4A1D36;
    --color-pink-text:       #F9A8D4;
    --color-amber-light:     #3E2E0E;
    --color-amber-alt:       #3B2F08;

    /* Dev banner */
    --color-dev-bg:          #3B2F08;
    --color-dev-border:      #78350F;
    --color-dev-text:        #FCD34D;

    /* Shadows: shallower + higher-alpha for dark surfaces. */
    --shadow-sm:             0 1px 3px rgb(0 0 0 / .4);
    --shadow-md:             0 4px 12px rgb(0 0 0 / .5);
    --shadow-lg:             0 8px 32px rgb(0 0 0 / .6);

    /* Badge role/status text pairs: pick contrasting text against the new dark tints. */
    --badge-role-mgr-text:   #93C5FD;
    --badge-active-text:     #86EFAC;
}

/* System preference: defer to OS dark-mode setting. */
@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        --color-neutral-50:      #18181B;
        --color-neutral-100:     #27272A;
        --color-neutral-200:     #3F3F46;
        --color-neutral-300:     #52525B;
        --color-neutral-400:     #71717A;
        --color-neutral-500:     #A1A1AA;
        --color-neutral-600:     #D4D4D8;
        --color-neutral-700:     #E4E4E7;
        --color-neutral-800:     #F4F4F5;
        --color-neutral-900:     #FAFAFA;

        --color-brand-light:     #2E2E6B;

        --color-surface:         #0F0F14;
        --color-surface-raised:  #18181B;
        --color-surface-sunken:  #09090B;
        --color-surface-overlay: rgba(0, 0, 0, 0.7);
        --color-surface-frosted: rgba(24, 24, 27, 0.9);

        --color-border:          var(--color-neutral-200);
        --color-border-light:    var(--color-neutral-100);
        --color-border-brand:    #4747C2;

        --color-error-light:     #3F1D1D;
        --color-error-border:    #7F1D1D;
        --color-error-text:      #FCA5A5;

        --color-warning-light:   #3B2F12;
        --color-warning-border:  #78350F;
        --color-warning-text:    #FCD34D;

        --color-success-light:   #14351F;
        --color-success-border:  #166534;
        --color-success-text:    #86EFAC;

        --color-info-light:      #1E2A4B;
        --color-info-border:     #1E40AF;
        --color-info-text:       #BFDBFE;

        --color-purple-light:    #3B1E63;
        --color-purple-muted:    #2E2458;
        --color-pink-light:      #4A1D36;
        --color-pink-text:       #F9A8D4;
        --color-amber-light:     #3E2E0E;
        --color-amber-alt:       #3B2F08;

        --color-dev-bg:          #3B2F08;
        --color-dev-border:      #78350F;
        --color-dev-text:        #FCD34D;

        --shadow-sm:             0 1px 3px rgb(0 0 0 / .4);
        --shadow-md:             0 4px 12px rgb(0 0 0 / .5);
        --shadow-lg:             0 8px 32px rgb(0 0 0 / .6);

        --badge-role-mgr-text:   #93C5FD;
        --badge-active-text:     #86EFAC;
    }
}

/* ── Spacing Utility Classes ───────────────────────────────────────────────── */
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }