/* ==========================================================================
   TPRC Client Portal — design tokens
   Source: "Client Portal UI Enhancements" design handoff v3, slides 6, 7, 8.

   Layer 1 of the deck's build order (tokens -> primitives -> shell). Every
   value here is lifted from the handoff; nothing is invented. Components must
   reference these variables rather than literal colours or pixel values, so a
   change here propagates through the whole portal.

   Load order matters: this file must come AFTER design-system.css so the new
   values win, and BEFORE tprc-ui.css which consumes them.
   ========================================================================== */

:root {
    /* ---- Colour: one accent -------------------------------------------- */
    /* Reserved for status and the single primary action. Never decorative. */
    --t-brand:            #FF4C00;   /* filled buttons, active underline     */
    --t-action:           #D13E00;   /* text links / "Upload ->" affordances */
    --t-brand-hover:      #E64400;
    --t-brand-subtle:     rgba(255, 76, 0, 0.08);
    --t-brand-border:     rgba(255, 76, 0, 0.22);

    /* ---- Colour: ink ramp ---------------------------------------------- */
    --t-ink:              #333F49;   /* headings, row titles                */
    --t-muted:            #6b7280;   /* body and supporting copy            */
    --t-faint:            #9ca3af;   /* metadata, timestamps                */

    /* ---- Surfaces ------------------------------------------------------- */
    --t-page-from:        #F6F7F8;
    --t-page-to:          #EDF0F2;
    --t-surface:          #FFFFFF;
    --t-surface-sunken:   #FAFBFC;
    /* Charcoal panel: Next Steps, page heroes, employee/candidate headers. */
    --t-charcoal:         #2B3640;
    --t-charcoal-deep:    #222C35;
    --t-on-charcoal:      #FFFFFF;
    --t-on-charcoal-mute: rgba(255, 255, 255, 0.62);

    /* ---- Lines and depth ------------------------------------------------ */
    --t-border:           1px solid rgba(27, 34, 40, 0.08);
    --t-border-color:     rgba(27, 34, 40, 0.08);
    --t-border-strong:    rgba(27, 34, 40, 0.14);
    --t-shadow:           0 2px 10px rgba(27, 34, 40, 0.04);
    --t-shadow-raised:    0 8px 24px rgba(27, 34, 40, 0.08);

    /* ---- Status palette -------------------------------------------------
       Status is never colour alone: every badge carries a text label, and
       urgent rows add a 4px left accent bar plus a warning icon. ---------- */
    --t-approved-bg:      #DCFCE7;  --t-approved-fg:  #173404;
    --t-pending-bg:       #FFF1EB;  --t-pending-fg:   #C23F00;
    --t-awaiting-bg:      #FEF3C7;  --t-awaiting-fg:  #92620B;
    --t-review-bg:        #E8EEF5;  --t-review-fg:    #33506E;
    --t-overdue-bg:       #FEE2E2;  --t-overdue-fg:   #791F1F;
    --t-inactive-bg:      #F2F4F5;  --t-inactive-fg:  #4b5563;

    /* ---- Spacing scale (4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 56) ------- */
    --t-space-1:  4px;
    --t-space-2:  8px;
    --t-space-3:  12px;
    --t-space-4:  16px;
    --t-space-5:  20px;
    --t-space-6:  24px;
    --t-space-7:  32px;
    --t-space-8:  40px;
    --t-space-9:  56px;

    /* ---- Layout --------------------------------------------------------- */
    --t-container:        1160px;
    --t-page-pad:         40px;     /* desktop; 20px on mobile, see below   */
    --t-section-gap:      40px;     /* 40-56px between page sections        */
    --t-section-gap-lg:   56px;
    --t-card-pad:         24px;     /* 20-34px depending on density         */
    --t-card-pad-lg:      32px;
    --t-row-pad:          16px 20px;
    --t-stack-gap:        12px;     /* 10-16px between stacked rows         */

    /* ---- Radius --------------------------------------------------------- */
    --t-radius-sm:        8px;
    --t-radius:           14px;     /* cards: 14-18px                       */
    --t-radius-lg:        18px;
    --t-radius-pill:      999px;

    /* ---- Typography ----------------------------------------------------- */
    --t-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --t-page-title-size:  28px;
    --t-page-title-track: -0.025em;
    --t-section-size:     20px;     /* 19-21px                              */
    --t-row-title-size:   15px;
    --t-body-size:        15px;     /* 14-15px                              */
    --t-body-sm-size:     14px;
    --t-micro-size:       11px;
    --t-micro-track:      0.08em;

    --t-weight-body:      400;
    --t-weight-row:       600;      /* row title / candidate name: 600-700  */
    --t-weight-bold:      700;

    /* ---- Motion --------------------------------------------------------- */
    --t-ease:             cubic-bezier(0.4, 0, 0.2, 1);
    --t-duration:         0.16s;

    /* ---- Touch ----------------------------------------------------------
       Minimum tap target, per the component library slide. --------------- */
    --t-tap:              44px;
}

@media (max-width: 768px) {
    :root {
        --t-page-pad:     20px;
        --t-section-gap:  32px;
        --t-card-pad:     20px;
        --t-card-pad-lg:  24px;
    }
}

/* Respect a user's reduced-motion preference across every primitive. */
@media (prefers-reduced-motion: reduce) {
    :root { --t-duration: 0.001s; }
}