/**
 * TASK:RE design tokens: the single source of truth for colour, type, space,
 * radius, elevation, motion and layering. Every other stylesheet reads these.
 *
 * Naming: new code uses --taskre-* only. The legacy names at the bottom
 * (--twc-*, --tr-*, --stone-*, ...) are frozen aliases kept so existing pages
 * render unchanged; do not add new ones. See __md_info/DESIGN_OVERRIDES.md.
 *
 * Theme: light by default. Dark applies with <html data-theme="dark">. The app
 * shell resolves the user's preference (light | dark | system, where system
 * follows prefers-color-scheme live) into that attribute before first paint,
 * see cdn/js/taskre-core.js. Pages without the attribute stay light, so pages
 * not yet migrated off hard-coded colours never flip. Partners re-theme by overriding --taskre-* (shared_header emits the
 * THEME_* constants as overrides).
 *
 * Contrast: every text/background pair below is checked against WCAG 2.2 AA;
 * the ratio table lives in DESIGN_OVERRIDES.md. Decorative-only values are
 * marked "non-text".
 */

@font-face {
    font-family: "Geist";
    src: url("../fonts/Geist-Variable.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Geist Mono";
    src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Geist Fallback";
    src: local("Arial");
    size-adjust: 104%;
    ascent-override: 92%;
    descent-override: 23%;
    line-gap-override: 0%;
}

:root {
    color-scheme: light;

    /* ── Colour: surfaces ─────────────────────────────────────────────── */
    --taskre-bg:             #F6F7F5;
    --taskre-surface:        #FFFFFF;
    --taskre-surface-2:      #EFF1F0;   /* sunken / hover */
    --taskre-surface-3:      #F7F8F7;   /* subtle row hover */
    --taskre-border:         #E2E5E3;   /* non-text */
    --taskre-border-strong:  #C9CECB;   /* non-text */
    --taskre-border-hover:   #868E8B;   /* non-text, 3:1 control boundary */
    --taskre-divider:        #EBEDEC;   /* non-text */
    --taskre-nav-glass:      rgba(246, 247, 245, .92);
    --taskre-scrim:          rgba(14, 17, 17, .4);
    --taskre-scrim-strong:   rgba(14, 17, 17, .85);
    --taskre-glass-control:  rgba(255, 255, 255, .15);   /* buttons on the image scrim */

    /* ── Colour: text ─────────────────────────────────────────────────── */
    --taskre-text:           #0E1111;
    --taskre-text-2:         #1B201F;   /* body ink */
    --taskre-text-3:         #343A38;
    --taskre-text-secondary: #474E4B;
    --taskre-text-muted:     #5F6763;
    --taskre-text-faint:     #646C6A;   /* AA-corrected stone-400 (was #8A928F, 3.2:1) */
    --taskre-text-inverse:   #FFFFFF;   /* on accent, ink, danger fills */
    --taskre-on-scrim:       #FFFFFF;   /* text on the image scrim; same in both themes */
    --taskre-on-avatar:      #FFFFFF;   /* initials on --taskre-avatar-* fills; same in both themes */

    /* ── Colour: accent ("Exchange Green") ─────────────────────────────── */
    --taskre-accent:         #0E7A4E;
    --taskre-accent-hover:   #0B6340;
    --taskre-accent-soft:    #E3F4EC;
    --taskre-accent-soft-2:  #EEF7F2;
    --taskre-accent-text:    #0B6340;   /* accent used as text on tinted fills */
    --taskre-accent-strong:  #064A2F;
    --taskre-accent-border:  #BFE5D2;   /* non-text */
    --taskre-accent-mark:    #34D399;   /* logo dot, non-text */
    --taskre-ink-fill:       #1B201F;   /* primary (ink) buttons */
    --taskre-ink-fill-hover: #0E1111;

    /* ── Colour: state ────────────────────────────────────────────────── */
    --taskre-success:         #0E7A4E;
    --taskre-success-soft:    #E3F4EC;
    --taskre-warning:         #A84E0A;
    --taskre-warn:            var(--taskre-warning);
    --taskre-warning-strong:  #92400E;
    --taskre-warning-soft:    #FFFBEB;
    --taskre-warning-soft-2:  #FEF3C7;
    --taskre-warning-border:  #FDE68A;  /* non-text */
    --taskre-warning-line:    #F59E0B;  /* non-text accent bar */
    --taskre-attention:       #C2410C;
    --taskre-attention-strong:#9A3412;
    --taskre-attention-soft:  #FFF7ED;
    --taskre-attention-soft-2:#FFEDD5;
    --taskre-danger:          #BD332C;
    --taskre-danger-hover:    #A82C26;
    --taskre-danger-strong:   #991B1B;
    --taskre-danger-soft:     #FEF2F2;
    --taskre-danger-subtle:   var(--taskre-danger-soft);
    --taskre-danger-soft-2:   #FEE2E2;
    --taskre-danger-border:   #FCA5A5;  /* non-text */
    --taskre-info:            #1E40AF;
    --taskre-info-soft:       #F0F9FF;
    --taskre-info-border:     #BAE6FD;  /* non-text */
    --taskre-teal:            #0F766E;

    /* Meters / workload bars (non-text, >= 3:1 against --taskre-surface-2) */
    --taskre-meter-ok:        #0E7A4E;
    --taskre-meter-moderate:  #A16207;
    --taskre-meter-warning:   #C2410C;
    --taskre-meter-critical:  #C2362F;

    /* Avatar fills (white initials on top, >= 4.5:1 in both themes) */
    --taskre-avatar-1:  #1B201F;
    --taskre-avatar-2:  #0E7A4E;
    --taskre-avatar-3:  #3F5B73;
    --taskre-avatar-4:  #6E4B3A;
    --taskre-avatar-5:  #55602F;
    --taskre-avatar-6:  #6B3F55;
    --taskre-avatar-7:  #2F6A6A;
    --taskre-avatar-8:  #474E4B;
    --taskre-avatar-9:  #34506B;
    --taskre-avatar-10: #5E5A2A;

    /* Brand panel: the always-dark sign-in aside (same in both themes) */
    --taskre-panel-bg:     #0A0B0B;
    --taskre-panel-text:   #ECEEEC;
    --taskre-panel-muted:  #9AA39F;
    --taskre-panel-soft:   #C9D0CC;
    --taskre-panel-glow:   rgba(52, 211, 153, .13);

    /* ── Focus ────────────────────────────────────────────────────────── */
    --taskre-focus-ring:     #0E7A4E;
    --taskre-focus-glow:     rgba(14, 122, 78, .16);
    --taskre-focus-width:    2px;
    --taskre-focus-offset:   2px;

    /* ── Typography ───────────────────────────────────────────────────── */
    --taskre-font-sans: "Geist", "Geist Fallback", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --taskre-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Product ramp: fixed steps for dense UI, fluid (clamp) steps for headings. */
    --taskre-text-2xs:     0.75rem;    /* 12  legibility floor */
    --taskre-text-xs:      0.75rem;    /* 12  caption */
    --taskre-text-sm:      0.8125rem;  /* 13  dense UI */
    --taskre-text-md:      0.875rem;   /* 14  body small */
    --taskre-text-ml:      0.9375rem;  /* 15 */
    --taskre-text-base:    1rem;       /* 16  body */
    --taskre-text-lg:      1.125rem;   /* 18  lead */
    --taskre-text-xl:      1.25rem;    /* 20  subheading */
    --taskre-text-2xl:     1.5rem;     /* 24  heading */
    --taskre-text-3xl:     clamp(1.75rem, 1.6rem + .6vw, 2rem);       /* 28-32 */
    --taskre-text-title:   clamp(2rem, 1.75rem + 1vw, 2.5rem);        /* 32-40 */
    --taskre-text-display: clamp(2.75rem, 2.4rem + 1.4vw, 3.75rem);   /* 44-60 */

    --taskre-weight-regular:  400;
    --taskre-weight-medium:   500;
    --taskre-weight-semibold: 600;

    --taskre-leading-display: 1.05;
    --taskre-leading-tight:   1.2;
    --taskre-leading-snug:    1.35;
    --taskre-leading-body:    1.5;

    --taskre-tracking-display: -0.02em;
    --taskre-tracking-title:   -0.015em;
    --taskre-tracking-heading: -0.01em;
    --taskre-tracking-caps:    0.06em;

    --taskre-measure: 68ch;

    /* ── Space (4px grid) ─────────────────────────────────────────────── */
    --taskre-space-1:  0.25rem;
    --taskre-space-2:  0.5rem;
    --taskre-space-3:  0.75rem;
    --taskre-space-4:  1rem;
    --taskre-space-5:  1.25rem;
    --taskre-space-6:  1.5rem;
    --taskre-space-8:  2rem;
    --taskre-space-12: 3rem;
    --taskre-space-16: 4rem;
    --taskre-space-24: 6rem;
    --taskre-space-32: 8rem;

    /* ── Radius: 6 inputs/chips, 10 buttons, 14 cards, 22 sheets, pill for avatars + status ── */
    --taskre-radius-xs:    4px;
    --taskre-radius-chip:  6px;
    --taskre-radius-md:    8px;
    --taskre-radius-btn:   10px;
    --taskre-radius-card:  14px;
    --taskre-radius-sheet: 22px;
    --taskre-radius-pill:  9999px;

    /* ── Elevation (tinted to the ink hue, never pure black) ──────────── */
    --taskre-shadow-1: 0 1px 0 rgba(14, 17, 17, .03), 0 1px 2px rgba(14, 17, 17, .04);
    --taskre-shadow-2: 0 1px 0 rgba(14, 17, 17, .03), 0 8px 24px -8px rgba(14, 17, 17, .12);
    --taskre-shadow-3: 0 24px 60px -20px rgba(14, 17, 17, .28);
    --taskre-shadow-pop: 0 20px 60px rgba(14, 17, 17, .18);

    /* ── Motion ───────────────────────────────────────────────────────── */
    --taskre-duration-fast: 120ms;
    --taskre-duration:      150ms;
    --taskre-duration-slow: 300ms;
    --taskre-ease:          cubic-bezier(.16, 1, .3, 1);
    --taskre-ease-standard: ease;

    /* ── Layout & layering ────────────────────────────────────────────── */
    --taskre-touch-target:   44px;
    --taskre-nav-height:     60px;
    --taskre-mob-nav-height: 60px;
    --taskre-content-width:  1400px;
    --taskre-z-sticky:     100;
    --taskre-z-bottom-nav: 150;
    --taskre-z-dropdown:   200;
    --taskre-z-popover:    2000;
    --taskre-z-overlay:    2500;
    --taskre-z-modal:      9000;
    --taskre-z-toast:      9500;
    --taskre-z-lightbox:   9999;
}

/* ── Dark ───────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
    color-scheme: dark;
    --taskre-bg:             #0A0B0B;
    --taskre-surface:        #121414;
    --taskre-surface-2:      #1A1D1C;
    --taskre-surface-3:      #161918;
    --taskre-border:         #2A2F2D;
    --taskre-border-strong:  #3A403E;
    --taskre-border-hover:   #626A67;
    --taskre-divider:        #222625;
    --taskre-nav-glass:      rgba(10, 11, 11, .88);
    --taskre-scrim:          rgba(0, 0, 0, .6);
    --taskre-scrim-strong:   rgba(0, 0, 0, .88);

    --taskre-text:           #ECEEEC;
    --taskre-text-2:         #D5D9D7;
    --taskre-text-3:         #C4C9C6;
    --taskre-text-secondary: #B3BAB6;
    --taskre-text-muted:     #9AA39F;
    --taskre-text-faint:     #8D9692;
    --taskre-text-inverse:   #0A0B0B;

    --taskre-accent:         #34D399;
    --taskre-accent-hover:   #5EE0AD;
    --taskre-accent-soft:    #0F2A1F;
    --taskre-accent-soft-2:  #0D231A;
    --taskre-accent-text:    #5EE0AD;
    --taskre-accent-strong:  #A7F3D0;
    --taskre-accent-border:  #1F5A41;
    --taskre-ink-fill:       #ECEEEC;
    --taskre-ink-fill-hover: #FFFFFF;

    --taskre-success:         #34D399;
    --taskre-success-soft:    #0F2A1F;
    --taskre-warning:         #FBBF24;
    --taskre-warning-strong:  #FDE68A;
    --taskre-warning-soft:    #241C08;
    --taskre-warning-soft-2:  #30250A;
    --taskre-warning-border:  #6B5310;
    --taskre-attention:       #FB923C;
    --taskre-attention-strong:#FED7AA;
    --taskre-attention-soft:  #26170C;
    --taskre-attention-soft-2:#33200F;
    --taskre-danger:          #F87171;
    --taskre-danger-hover:    #FCA5A5;
    --taskre-danger-strong:   #FECACA;
    --taskre-danger-soft:     #2A1313;
    --taskre-danger-soft-2:   #361818;
    --taskre-danger-border:   #7F2A2A;
    --taskre-info:            #93C5FD;
    --taskre-info-soft:       #0E1A2B;
    --taskre-info-border:     #1E3A5F;
    --taskre-teal:            #5EEAD4;

    --taskre-meter-ok:        #34D399;
    --taskre-meter-moderate:  #EAB308;
    --taskre-meter-warning:   #FB923C;
    --taskre-meter-critical:  #F87171;

    --taskre-focus-ring:     #5EE0AD;
    --taskre-focus-glow:     rgba(52, 211, 153, .22);

    --taskre-shadow-1: 0 1px 0 rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .4);
    --taskre-shadow-2: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 24px -8px rgba(0, 0, 0, .6);
    --taskre-shadow-3: 0 24px 60px -20px rgba(0, 0, 0, .7);
    --taskre-shadow-pop: 0 20px 60px rgba(0, 0, 0, .6);
}

@media (prefers-contrast: more) {
    :root {
        --taskre-text-muted: var(--taskre-text-secondary);
        --taskre-text-faint: var(--taskre-text-secondary);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Frozen legacy aliases. Existing markup reads these; values resolve to the
   tokens above. Do not reference them from new code.
   ══════════════════════════════════════════════════════════════════════ */
:root {
    /* twc_core.css platform names */
    --twc-bg:              var(--taskre-bg);
    --twc-surface:         var(--taskre-surface);
    --twc-surface-hover:   var(--taskre-surface-2);
    --twc-border:          var(--taskre-border);
    --twc-divider:         var(--taskre-divider);
    --twc-text:            var(--taskre-text);
    --twc-text-secondary:  var(--taskre-text-secondary);
    --twc-text-muted:      var(--taskre-text-muted);
    --twc-text-inverse:    var(--taskre-text-inverse);
    --twc-accent:          var(--taskre-accent);
    --twc-accent-hover:    var(--taskre-accent-hover);
    --twc-accent-light:    var(--taskre-accent-soft);
    --twc-success:         var(--taskre-success);
    --twc-success-light:   var(--taskre-success-soft);
    --twc-warning:         var(--taskre-warning);
    --twc-warning-light:   var(--taskre-warning-soft);
    --twc-error:           var(--taskre-danger);
    --twc-error-light:     var(--taskre-danger-soft);
    --twc-highlight:       var(--taskre-border-strong);
    --twc-highlight-light: var(--taskre-surface-2);
    --twc-font:            var(--taskre-font-sans);
    --twc-font-mono:       var(--taskre-font-mono);
    --twc-font-weight:          var(--taskre-weight-regular);
    --twc-font-weight-medium:   var(--taskre-weight-medium);
    --twc-font-weight-bold:     var(--taskre-weight-semibold);
    --twc-font-weight-semibold: var(--taskre-weight-medium);
    --twc-text-xs:    var(--taskre-text-xs);
    --twc-text-sm:    var(--taskre-text-md);
    --twc-text-base:  var(--taskre-text-base);
    --twc-text-lg:    var(--taskre-text-xl);
    --twc-text-xl:    var(--taskre-text-2xl);
    --twc-text-2xl:   var(--taskre-text-title);
    --twc-text-3xl:   var(--taskre-text-display);
    --twc-line-height:       var(--taskre-leading-body);
    --twc-line-height-tight: var(--taskre-leading-tight);
    --twc-space-1:  var(--taskre-space-1);
    --twc-space-2:  var(--taskre-space-2);
    --twc-space-3:  var(--taskre-space-3);
    --twc-space-4:  var(--taskre-space-4);
    --twc-space-6:  var(--taskre-space-6);
    --twc-space-8:  var(--taskre-space-8);
    --twc-space-12: var(--taskre-space-12);
    --twc-space-16: var(--taskre-space-16);
    --twc-space-24: var(--taskre-space-24);
    --twc-content-width:  1200px;
    --twc-narrow-width:   720px;
    --twc-header-height:  64px;
    --twc-sidebar-width:  260px;
    --twc-radius:            var(--taskre-radius-btn);
    --twc-radius-sm:      var(--taskre-radius-xs);
    --twc-radius-lg:         var(--taskre-radius-card);
    --twc-radius-full:    var(--taskre-radius-pill);
    --twc-transition:      var(--taskre-duration) var(--taskre-ease-standard);
    --twc-transition-slow: var(--taskre-duration-slow) var(--taskre-ease-standard);
    --twc-shadow-sm:       var(--taskre-shadow-1);
    --twc-shadow:          var(--taskre-shadow-1);
    --twc-shadow-lg:       var(--taskre-shadow-2);

    /* taskre-ds.css "Private Ledger" names */
    --tr-canvas:       var(--taskre-bg);
    --tr-raised:       var(--taskre-surface);
    --tr-sunken:       var(--taskre-surface-2);
    --tr-ink:          var(--taskre-text);
    --tr-ink-2:        var(--taskre-text-2);
    --tr-text:         var(--taskre-text-2);
    --tr-muted:        var(--taskre-text-muted);
    --tr-faint:        var(--taskre-text-muted);
    --tr-line:         var(--taskre-border);
    --tr-line-strong:  var(--taskre-border-strong);
    --tr-accent:       var(--taskre-accent);
    --tr-accent-hover: var(--taskre-accent-hover);
    --tr-accent-tint:  var(--taskre-accent-soft);
    --tr-accent-ink:   var(--taskre-accent-strong);
    --tr-accent-glow:  var(--taskre-focus-glow);
    --tr-danger:       var(--taskre-danger);
    --tr-warning:      var(--taskre-warning);
    --tr-font:         var(--taskre-font-sans);
    --tr-mono:         var(--taskre-font-mono);
    --tr-r-chip:       var(--taskre-radius-chip);
    --tr-r-btn:        var(--taskre-radius-btn);
    --tr-r-card:       var(--taskre-radius-card);
    --tr-r-sheet:      var(--taskre-radius-sheet);
    --tr-shadow-1:     var(--taskre-shadow-1);
    --tr-shadow-2:     var(--taskre-shadow-2);
    --tr-shadow-3:     var(--taskre-shadow-3);
    --tr-ease:         var(--taskre-ease);

    /* Inline-style palette used across page handlers */
    --stone-50:   var(--taskre-surface-3);
    --stone-100:  var(--taskre-surface-2);
    --stone-200:  var(--taskre-border);
    --stone-300:  var(--taskre-border-strong);
    --stone-400:  var(--taskre-text-faint);
    --stone-500:  var(--taskre-text-muted);
    --stone-600:  var(--taskre-text-secondary);
    --stone-700:  var(--taskre-text-3);
    --stone-800:  var(--taskre-text-2);
    --stone-900:  var(--taskre-text);
    --green-600:  var(--taskre-accent);
    --green-700:  var(--taskre-accent-hover);
    --blue-600:   var(--taskre-accent);
    --violet-600: var(--taskre-text-3);
    --red-600:    var(--taskre-danger);
    --amber-600:  var(--taskre-warning);
    --mob-nav-h:  var(--taskre-mob-nav-height);
}