/* =========================================
   HRFlex Typography — Single Source of Truth
   Sora (headings) · DM Sans (body) · Cascadia Code (mono)
   =========================================
   HOW TO USE
   ─────────
   font-family: var(--hr-font-heading);   → Sora
   font-family: var(--hr-font-body);      → DM Sans
   font-family: var(--hr-font-mono);      → Cascadia Code
   font-size:   var(--hr-text-sm);        → 12px
   ========================================= */

:root {
  /* ── Font Stacks ── */
  --hr-font-heading: 'Sora', sans-serif;
  --hr-font-body:    'DM Sans', sans-serif;
  --hr-font-mono:    'Cascadia Code', 'Fira Code', 'Consolas', monospace;

  /* ── Type Ramp ── */
  --hr-text-2xs:  10px;   /* micro labels, badges, meta     */
  --hr-text-xs:   12px;   /* fine print, disclaimers         */
  --hr-text-sm:   12px;   /* grid cells, captions            */
  --hr-text-base: 13px;   /* body default (matches html)     */
  --hr-text-md:   14px;   /* form labels, filter controls    */
  --hr-text-lg:   16px;   /* sub-headings, card titles       */
  --hr-text-xl:   18px;   /* section headings, icons         */
  --hr-text-2xl:  24px;   /* page titles, stat values        */
  --hr-text-3xl:  36px;   /* hero / dashboard numbers        */
  --hr-text-4xs:  8px;    /* micro scale markers / tick labels (appraisal rating scale) */
  --hr-text-3xs:  9px;    /* micro counter badge on a rating dot                        */

  /* ── Color System ──
     Interactive accent: Blue (SaaS-neutral, universal affordance)
     Semantic widgets use their own color families:
       Leave   → Emerald   (nature, rest — matches logo green)
       ClockIn → Blue      (professional, time)
       Birthday→ Amber     (celebration — matches logo orange)
     ─────────────────────────────────────────────────────────── */

  /* ── Slate Scale (cool blue-gray — primary neutral) ── */
  --hr-slate-900: #0f172a;
  --hr-slate-800: #1e293b;
  --hr-slate-700: #334155;
  --hr-slate-600: #475569;
  --hr-slate-500: #64748b;
  --hr-slate-400: #94a3b8;
  --hr-slate-300: #cbd5e1;
  --hr-slate-200: #e2e8f0;
  --hr-slate-100: #f1f5f9;
  --hr-slate-50:  #f8fafc;

  /* ── Gray Scale (slightly warm neutral — form controls) ── */
  --hr-gray-700: #374151;
  --hr-gray-600: #4b5563;
  --hr-gray-500: #6b7280;
  --hr-gray-400: #9ca3af;
  --hr-gray-300: #d1d5db;
  --hr-gray-200: #e5e7eb;
  --hr-gray-100: #f3f4f6;
  --hr-gray-50:  #f9fafb;

  /* ── Semantic Text Colors ── */
  --hr-text-strong:    #0f172a;   /* heaviest — hero headings  */
  --hr-text-default:   #1e293b;   /* default heading text      */
  --hr-text-secondary: #334155;   /* supporting labels         */
  --hr-text-body:      #475569;   /* normal prose              */
  --hr-text-muted:     #64748b;   /* captions, metadata        */
  --hr-text-subtle:    #94a3b8;   /* disabled                  */
  /* Every empty-field placeholder - text box, searchable box, native select. --hr-text-muted,
     not --hr-text-subtle: subtle is 2.56:1 on white, under the WCAG AA 4.5 floor (muted 4.76:1). */
  --hr-text-placeholder: var(--hr-text-muted);
  --hr-text-disabled:  #cbd5e1;
  --hr-text-inverse:   #ffffff;

  /* ── Semantic Background Colors ── */
  --hr-bg-white:   #ffffff;
  --hr-bg-surface: #f8fafc;   /* card / panel background  */
  --hr-bg-subtle:  #f1f5f9;   /* inset / zebra row        */
  --hr-bg-inset:   #e2e8f0;   /* deep inset / well        */

  /* ── Semantic Border Colors ── */
  --hr-border:        #e2e8f0;   /* default separator  */
  --hr-border-light:  #e5e7eb;   /* lighter divider    */
  --hr-border-strong: #cbd5e1;   /* prominent border   */
  --hr-border-faint:  #eef1f5;   /* grid cell hairline, lighter than --hr-border-light */

  /* ── Interactive / Accent — Blue (SaaS-neutral) ── */
  --hr-accent:           #3b82f6;
  --hr-accent-hover:     #2563eb;
  --hr-accent-light:     #eff6ff;
  --hr-accent-border:    #bfdbfe;
  --hr-accent-text:      #2563eb;
  --hr-accent-text-dark: #1e40af;

  /* Extended blue shades */
  --hr-blue-800: #1e40af;
  --hr-blue-700: #1d4ed8;
  --hr-blue-400: #60a5fa;
  --hr-blue-300: #93c5fd;
  --hr-blue-100: #dbeafe;

  /* ── Heading text (kept for backwards compat) ── */
  --hr-heading: #1e293b;

  /* ── Success / Green ── */
  --hr-success:         #16a34a;
  --hr-success-hover:   #15803d;
  --hr-success-light:   #f0fdf4;
  --hr-success-lighter: #dcfce7;
  --hr-success-border:  #bbf7d0;
  --hr-success-text:    #16a34a;
  --hr-success-dark:    #166534;
  --hr-success-bright:  #22c55e;

  /* ── Warning / Amber ── */
  --hr-warning:         #f59e0b;
  --hr-warning-hover:   #d97706;
  --hr-warning-light:   #fffbeb;
  --hr-warning-lighter: #fef3c7;
  --hr-warning-border:  #fde68a;
  --hr-warning-text:    #b45309;
  --hr-warning-dark:    #92400e;

  /* ── Danger / Red ── */
  --hr-danger:         #ef4444;
  --hr-danger-hover:   #dc2626;
  --hr-danger-light:   #fee2e2;
  --hr-danger-lighter: #fef2f2;
  --hr-danger-border:       #fca5a5;
  --hr-danger-border-light: #fecaca;   /* rose-200 — lighter border variant */
  --hr-danger-text:    #dc2626;
  --hr-danger-dark:    #b91c1c;
  --hr-danger-darker:  #991b1b;

  /* ── Info / Cyan ── */
  --hr-info:         #0891b2;
  --hr-info-hover:   #0e7490;

  /* ── Leave widget — emerald (logo-adjacent green) ── */
  --hr-leave:            #10b981;
  --hr-leave-hover:      #059669;
  --hr-leave-light:      #ecfdf5;
  --hr-leave-lighter:    #d1fae5;
  --hr-leave-border:     #a7f3d0;
  --hr-leave-text:       #059669;
  --hr-leave-text-dark:  #065f46;

  /* ── Clock-in widget — blue (professional, time) ── */
  --hr-clockin:          #2563eb;
  --hr-clockin-hover:    #1d4ed8;
  --hr-clockin-light:    #eff6ff;
  --hr-clockin-lighter:  #dbeafe;
  --hr-clockin-border:   #bfdbfe;
  --hr-clockin-text:     #2563eb;
  --hr-clockin-text-dark:#1e40af;

  /* ── Birthday widget — amber (celebration, warmth) ── */
  --hr-birthday:         #f59e0b;
  --hr-birthday-hover:   #d97706;
  --hr-birthday-light:   #fffbeb;
  --hr-birthday-lighter: #fef3c7;
  --hr-birthday-border:  #fde68a;
  --hr-birthday-text:    #b45309;
  --hr-birthday-text-dark:#92400e;

  /* ── Shadow / Overlay alphas ── */
  --hr-shadow-xs:     rgba(0, 0, 0, 0.04);
  --hr-shadow-sm:     rgba(0, 0, 0, 0.06);
  --hr-shadow-md:     rgba(0, 0, 0, 0.08);
  --hr-shadow-lg:     rgba(0, 0, 0, 0.10);
  --hr-shadow-accent-subtle: rgba(59, 130, 246, 0.08);
  --hr-shadow-accent-soft:   rgba(59, 130, 246, 0.10);
  --hr-shadow-accent-light:  rgba(59, 130, 246, 0.12);
  --hr-shadow-accent:        rgba(59, 130, 246, 0.15);
  --hr-shadow-accent-strong: rgba(59, 130, 246, 0.18);
  --hr-shadow-accent-focus:  rgba(59, 130, 246, 0.25);
  --hr-shadow-indigo-soft:   rgba(99, 102, 241, 0.08);
  --hr-shadow-accent-deep-light: rgba(51, 102, 153, 0.12);   /* --hr-accent-deep as a focus-ring glow */
  --hr-shadow-hero:       rgba(15, 23, 42, 0.9);   /* dark hero-card drop shadow, reused across modules */
  --hr-shadow-hero-soft:  rgba(15, 23, 42, 0.85);
  --hr-shadow-hero-faint: rgba(15, 23, 42, 0.8);
  --hr-shadow-card:       rgba(15, 23, 42, 0.05);  /* light single-layer card shadow, appraisal.css */
  --hr-overlay-white-07: rgba(255, 255, 255, 0.07);   /* card fill on a dark band            */
  --hr-overlay-white-10: rgba(255, 255, 255, 0.1);
  --hr-overlay-white-15: rgba(255, 255, 255, 0.15);   /* card border on a dark band          */
  --hr-overlay-white-18: rgba(255, 255, 255, 0.18);
  --hr-overlay-white-45: rgba(255, 255, 255, 0.45);   /* dimmed text on a dark band          */
  --hr-overlay-white-55: rgba(255, 255, 255, 0.55);   /* secondary text on a dark band       */
  --hr-overlay-white-70: rgba(255, 255, 255, 0.7);    /* eyebrow / body text on a dark band  */
  --hr-overlay-white-85: rgba(255, 255, 255, 0.85);   /* icon chip on a tinted panel head    */

  /* ── Border radius scale ── */
  --hr-radius-sm: 6px;
  --hr-radius-md: 8px;

  /* ── Special / Misc ── */
  --hr-indigo:        #6366f1;                /* purple-adjacent accent  */
  --hr-indigo-light:  #c7d2fe;               /* indigo-200 tint         */
  --hr-avatar-bg:     #3b4557;               /* default initials avatar background */
  --hr-black:         #000000;
  --hr-code-surface:  #30363d;                /* code block background   */
  --hr-code-text:     #c9d1d9;                /* code/console text on dark surfaces */
  --hr-code-track:    #161b22;                /* code/console scrollbar track */
  --hr-orange-light:  #fff7ed;                /* orange-50 tint          */
  --hr-neutral-600:   #667085;                /* design-system neutral   */
  --hr-accent-deep: #336699;                  /* deep brand blue — grid icons, grid link hover, active pager chip.
                                                 Deliberately darker than --hr-accent; not deprecated, do not "modernize" away.
                                                 (Renamed from --hr-legacy-accent 2026-07-28.) */
  --hr-wizard-progress-done: #86efac;          /* decorative green-300 — wizard progress connector/gradient "done" state */
  --hr-grid-row-selected: #cfe2ff;             /* blue-200 tint — HRFlexGrid's selected row */
  --hr-page-title-bg:     #dbe4f0;             /* .hr-page-title strip fill */
  --hr-timeselector-bg:     #eff3fe;           /* MKB:TimeSelector input skin — fill   */
  --hr-timeselector-border: #b5c7f9;           /* MKB:TimeSelector input skin — border */
  --hr-timeselector-text:   #003a63;           /* MKB:TimeSelector input skin — text   */

  /* ── Icon-badge palette (dropdown/stat-card two-tone icons) ── */
  --hr-icon-violet-bg:     #ede9fe;
  --hr-icon-violet-bg-soft: #f5f3ff;             /* violet-50 — a tinted panel head  */
  --hr-icon-violet-text:   #7c3aed;
  --hr-icon-violet-accent: #8b5cf6;
  --hr-icon-amber-bg:    #fefce8;
  --hr-icon-amber-text:  #ca8a04;
  --hr-icon-orange-text: #ea580c;
  --hr-icon-purple-text: #9333ea;
  --hr-icon-indigo-bg:   #eef2ff;
  --hr-icon-indigo-text: #4f46e5;
  --hr-icon-indigo-text-dark: #4338ca;           /* indigo-700 — darker text on the indigo-100 chip */
  /* Added 2026-08-16 to complete the rotation for SelfServiceHome's six catalogue
     panels. DECORATIVE, deliberately: teal is not --hr-success and rose is not
     --hr-danger, so a category accent can never be mistaken for a status. That
     confusion is exactly what the previous accents caused. */
  --hr-icon-teal-bg:     #f0fdfa;                /* teal-50  */
  --hr-icon-teal-text:   #0f766e;                /* teal-700 */
  --hr-icon-rose-bg:     #fff1f2;                /* rose-50  */
  --hr-icon-rose-text:   #be123c;                /* rose-700 */
  --hr-icon-sky-bg:      #f0f9ff;                /* sky-50   */
  --hr-icon-sky-text:    #0284c7;                /* sky-600  */
  --hr-icon-teal-accent: #0d9488;                /* teal-600 — brighter than --hr-icon-teal-text */
  --hr-icon-sky-chip:      #e0f2fe;              /* sky-100  */
  --hr-icon-sky-text-dark: #0369a1;              /* sky-700 — text on the sky-100 chip */

  /* ── Icon CHIP tints (100-level) ──
     The badge palette above is two-tone by design: a light field and a dark
     glyph. These are the field for the round/rounded icon chip when it sits ON a
     50-level head wash -- one step deeper than the head, so the chip reads as a
     chip instead of dissolving into the band behind it.
     Named -chip rather than folded into the -bg names on purpose: -bg is already
     50-level for indigo and amber but 100-level for violet, and renaming those
     would touch call sites well outside this pass. */
  --hr-icon-indigo-chip: #e0e7ff;                /* indigo-100 */
  --hr-icon-teal-chip:   #ccfbf1;                /* teal-100   */
  --hr-icon-blue-chip:   #dbeafe;                /* blue-100   */
  --hr-icon-violet-chip: #ede9fe;                /* violet-100 */
  --hr-icon-orange-chip: #ffedd5;                /* orange-100 */
  --hr-icon-rose-chip:   #ffe4e6;                /* rose-100   */

  /* ── Leave-timeline categorical rotation (completes --hr-accent/--hr-warning-hover slots) ── */
  --hr-timeline-teal:   #0f9f95;
  --hr-timeline-violet: #7c5ce5;
  --hr-timeline-rose:   #dc5b78;
  --hr-leave-timeline-ink:  #172033;   /* dark ink used for timeline bars/labels — no existing token matched */
  --hr-leave-timeline-line: #dbe3ee;   /* grid line color for the timeline track */
  --hr-leave-timeline-border: #dfe6ef; /* card border on the timeline and its filter bar */
  --hr-leave-timeline-rail:   #b8c7da; /* divider between the name rail and the track    */
  --hr-leave-timeline-group-bg:    #edf2f7; /* group-header row fill                     */
  --hr-leave-timeline-group-track: #f4f7fa; /* group-header fill across the day track    */

  /* ── Navigation / Sidebar ── */
  --hr-nav-bg:         #2f3542;   /* sidebar dark background   */
  --hr-nav-text:       #dfe4ea;   /* sidebar text on dark      */
  --hr-nav-border:     #404756;   /* sidebar item separator    */
  --hr-nav-hover:      #3a4050;   /* sidebar item hover        */
  --hr-nav-active:     #454d61;   /* top bar current section   */
  --hr-nav-item-hover: #e8eef7;   /* treeview item hover (light) */

  /* Rail group headers, and they are TWO colours because the state matters.

     Recovered from the Administration accordion this rail replaced. A closed
     group's header was #3B4557 dark slate with white bold text; an OPEN group's
     header was a light blue gradient (topbg.png, a 5x68 tile decoded 2026-08-16:
     #E3ECF1 -> #C1D4E2 -> #C2D8E6) with #30373e text. So a dark band never sat
     directly above a white item list — opening a group turned its header light
     and merged it with its own contents.

     That is the whole point of the pair: closed groups are doors you scan, the
     open one recedes so the eye goes to what is inside it. A single dark header
     above a white list is the arrangement the original design specifically did
     not have, and it stripes badly.

     Flat, not gradient: the tile spanned 34 units of lightness over 34px, which
     reads as flat anyway, and the rest of this system has moved off gradients
     (see .hr-legacy-panel-title). #d9e6ef is that tile's midpoint. */
  --hr-nav-group-bg:         #3b4557;   /* collapsed — the old closed header   */
  --hr-nav-group-hover:      #454f63;
  --hr-nav-group-border:     #57566f;   /* the old accordion's header rule     */
  --hr-nav-group-open-bg:    #d9e6ef;   /* expanded — the old topbg.png tile   */
  --hr-nav-group-open-hover: #cadcea;
  --hr-nav-group-open-text:  #30373e;   /* the old open-header text colour     */

  /* Off-ramp, not part of the ramp. The bare `input` rule rehomed from
     Accordion.css carried a raw 11px, which sits between --hr-text-2xs (10) and
     --hr-text-xs (12); tokenised at its existing value so the move changes
     nothing on screen, and named so it is obvious this is a legacy default to
     delete rather than a size to reach for. */
  --hr-text-legacy-input: 11px;

  /* Height of the merged application top bar (brand + primary nav + user area).
     .hr-shell__header sizes its grid row from this, and Admin.master's Ext.NET
     North region repeats the number as an attribute because Ext writes an inline
     px height that CSS cannot reach. Change both together. */
  --hr-topnav-height:  56px;

  /* ── Notification / Toast status colors (Material-derived) ── */
  --hr-notify-success:      #4CAF50;
  --hr-notify-success-dark: #388E3C;
  --hr-notify-error:        #F44336;
  --hr-notify-error-dark:   #D32F2F;
  --hr-notify-warning:      #FF9800;
  --hr-notify-warning-dark: #F57C00;
  --hr-notify-info:         #2196F3;
  --hr-notify-info-dark:    #1976D2;

  /* ── Notify modal-footer button glow (matches each notify color's own hue) ── */
  --hr-notify-success-glow:       rgba(76, 175, 80, 0.3);
  --hr-notify-success-glow-hover: rgba(76, 175, 80, 0.35);
  --hr-notify-error-glow:         rgba(244, 67, 54, 0.3);
  --hr-notify-error-glow-hover:   rgba(244, 67, 54, 0.35);
  --hr-notify-warning-glow:       rgba(255, 152, 0, 0.3);
  --hr-notify-warning-glow-hover: rgba(255, 152, 0, 0.35);
  --hr-notify-info-glow:          rgba(33, 150, 243, 0.3);
  --hr-notify-info-glow-hover:    rgba(33, 150, 243, 0.35);

  /* ── Overlay / Backdrop ── */
  --hr-overlay:       rgba(13, 31, 60, 0.4);  /* modal/drawer backdrop */

  /* ── Faint semantic tints (lighter than *-lighter) ── */
  --hr-success-faint: #e8f9f0;    /* KPI trend-up background    */
  --hr-danger-faint:  #fdecec;    /* KPI trend-down background  */
  --hr-rose-100:      #ffe4e6;    /* rose tint for stat icons   */

  /* ── Callout custom borders (brighter than semantic tokens) ── */
  --hr-callout-amber: #FFB800;    /* bright amber — callout warning variant */
  --hr-callout-coral: #FF6B6B;    /* coral red    — callout error variant   */
}

/* ── Body default ── */
body {
  font-family: var(--hr-font-body);
}

/* ── Heading elements ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hr-font-heading);
}

/* ── Rules rehomed from Content/Accordion.css (2026-08-16) ──────────────────
   That file styled one control — the AjaxControlToolkit Accordion in
   Admin.master — but main.css @imported it, so its two BARE ELEMENT selectors
   applied to the whole product. When the Administration rail was converted the
   file became unreferenced and was deleted; these two rules came here rather
   than going with it, because they are type rules and this is where type lives.

   Both are carried at their existing values so nothing moves. They are not
   endorsements: a bare `h3`/`input` selector is precisely how a stylesheet for
   one control ends up governing every page, and a previous pass already had to
   add a `padding: 0` guard to eight panel-title components to defend against
   this file (see the note in hrflex.page.css). Prefer a component class; retire
   these once the sites below carry one.

   `h3` was `font-size: 18px`, which is exactly --hr-text-xl. 15 bare <h3>
   elements across 10 markup files depend on it; the other 93 carry a class. */
h3 {
  font-size: var(--hr-text-xl);
  font-weight: normal;
  margin: 0;
}

/* `input` and `select` were a raw 11px each. 35 of 1,090 asp:TextBox tags and 2
   of 1,357 asp:DropDownList tags carry no CssClass and so have nothing else
   setting their size; every HRFlex control class (hr-filter-bar__input,
   hr-filter-bar__select, hr-modal-form__input, form-control) sets its own and is
   unaffected. Of the 50 literal <input> tags without a class, 41 are checkbox or
   radio and 4 are hidden, so between them these two rules reach about a dozen
   controls in the whole product. */
input,
select {
  font-size: var(--hr-text-legacy-input);
}

/* ── Utility classes: font-size ── */
.hr-text-2xs  { font-size: var(--hr-text-2xs);  }  /* 10px */
.hr-text-xs   { font-size: var(--hr-text-xs);   }  /* 12px */
.hr-text-sm   { font-size: var(--hr-text-sm);   }  /* 12px */
.hr-text-base { font-size: var(--hr-text-base); }  /* 13px */
.hr-text-md   { font-size: var(--hr-text-md);   }  /* 14px */
.hr-text-lg   { font-size: var(--hr-text-lg);   }  /* 16px */
.hr-text-xl   { font-size: var(--hr-text-xl);   }  /* 18px */
.hr-text-2xl  { font-size: var(--hr-text-2xl);  }  /* 24px */
.hr-text-3xl  { font-size: var(--hr-text-3xl);  }  /* 36px */

/* ── Utility classes: font-family ── */
.hr-font-heading { font-family: var(--hr-font-heading); }
.hr-font-body    { font-family: var(--hr-font-body);    }
.hr-font-mono    { font-family: var(--hr-font-mono);    }