/* ==========================================================================
   Fortify HR · Design tokens
   Every colour, radius, shadow, blur and timing value lives here.
   Light is the default theme; [data-theme="dark"] swaps the colour tokens.
   ========================================================================== */

:root {
  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-3xs: 0.5rem;      /* 8  · avatar initials, tiny */
  --fs-2xs: 0.625rem;    /* 10 · micro labels, counters */
  --fs-xxs: 0.6875rem;   /* 11 · chips, kbd */
  --fs-xs: 0.75rem;      /* 12 */
  --fs-sm: 0.8125rem;    /* 13 */
  --fs-md: 0.875rem;     /* 14 */
  --fs-base: 0.9375rem;  /* 15 */
  --fs-lg: 1.0625rem;    /* 17 */
  --fs-xl: 1.375rem;     /* 22 */
  --fs-2xl: 1.75rem;     /* 28 */
  --fs-3xl: 2.125rem;    /* 34 */
  --fs-display: 2.75rem; /* 44 · clock */
  --fs-hero: clamp(1.9rem, 3.2vw, 2.75rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-none: 1;
  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-body: 1.55;

  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.05em;       /* uppercase labels */
  --tracking-caps-wide: 0.07em;  /* uppercase micro labels */
  --measure-headline: 14ch;
  --measure-body: 44ch;

  /* ---- Spacing (4px scale with half steps) ------------------------------ */
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  /* ---- Sizes: icons ------------------------------------------------------- */
  --icon-2xs: 13px;
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --icon-xl: 24px;
  --icon-2xl: 32px;

  /* ---- Sizes: boxes (avatars, icon tiles, dots) --------------------------- */
  --size-3xs: 10px;
  --size-2xs: 18px;
  --size-xs: 24px;
  --size-sm: 32px;
  --size-md: 36px;
  --size-lg: 40px;
  --size-xl: 48px;
  --size-2xl: 56px;
  --size-3xl: 72px;
  --size-4xl: 96px;

  /* ---- Sizes: controls ------------------------------------------------------ */
  --control-h-2xs: 20px;   /* counters */
  --control-h-xs: 24px;    /* badges */
  --control-h-sm: 32px;    /* small buttons, segmented */
  --control-h-md: 40px;    /* buttons, icon buttons */
  --control-h-input: 42px; /* inputs, search */
  --control-h-tab: 46px;
  --control-h-lg: 48px;
  --control-h-nav: 42px;
  --checkbox-size: 18px;
  --switch-w: 38px;
  --switch-h: 22px;
  --switch-knob: 16px;
  --progress-h: 8px;
  --stepper-h: 4px;
  --indicator-w: 3px;

  /* ---- Borders ------------------------------------------------------------- */
  --border-width: 1px;
  --border-width-thick: 1.5px;
  --border-width-strong: 2px;
  --ring-width: 2px;
  --ring-offset: 2px;
  --ring-soft-width: 3px;

  /* ---- Radius -------------------------------------------------------------- */
  --radius-2xs: 4px;
  --radius-xs: 6px;
  --radius-2s: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---- Glass ---------------------------------------------------------------- */
  --blur: 20px;
  --blur-sm: 4px;
  --blur-md: 6px;
  --blur-mesh: 40px;
  --blur-mesh-lg: 60px;
  --saturate: 160%;
  --saturate-mesh: 120%;

  /* ---- Motion --------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 200ms;
  --dur-slow: 320ms;
  --dur-slower: 600ms;
  --dur-spin: 700ms;
  --dur-drift: 28s;
  --lift: -3px;          /* hover lift distance */
  --press: 1px;          /* active press distance */

  /* ---- Z-index ------------------------------------------------------------- */
  --z-behind: -2;
  --z-behind-front: -1;
  --z-topbar: 30;
  --z-scrim: 35;
  --z-sidebar: 40;
  --z-dropdown: 50;
  --z-tooltip: 60;
  --z-modal: 100;
  --z-toast: 200;
  --z-skip: 1000;

  /* ---- Layout ---------------------------------------------------------------- */
  /* Breakpoints (CSS cannot read variables inside @media; kept here as reference):
     --bp-xl 1279px (rail sidebar) · --bp-lg 1180px · --bp-md 1023px ·
     --bp-tablet 860px · --bp-mobile 768px · --bp-sm 640px · --bp-xs 560px · --bp-2xs 480px */
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 76px;
  --drawer-w: 280px;
  --topbar-h: 64px;
  --shell-gap: 12px;
  --content-max: 1440px;
  --aside-w: 340px;
  --search-w: 460px;
  --modal-w: 640px;
  --modal-w-lg: 760px;
  --modal-w-sm: 440px;
  --auth-card-w: 420px;
  --dropdown-w: 230px;
  --dropdown-w-wide: 360px;
  --toast-w: 380px;
  --empty-text-w: 380px;
  --card-min-w: 220px;
  --select-min-w: 150px;
  --search-min-w: 240px;
  --info-min-w: 220px;
  --cal-label-w: 140px;
  --chart-h: 280px;
  --chart-h-sm: 220px;
  --cover-h: 112px;
  --avatar-overlap: -64px;
  --notif-max-h: 360px;
  --textarea-min-h: 96px;
  --heat-min: 38px;
  --heat-min-sm: 34px;
  --cal-day-min: 112px;
  --cal-day-min-sm: 64px;
  --celebrate-date-w: 46px;
  --table-wide-min: 1040px;
  --wide-name-w: 130px;
  --stacked-bar-h: 14px;
  --segbar-min-w: 56px;
  --pay-period-field-w: 260px;

  /* ---- Theme-independent colours ------------------------------------------------ */
  --white: #ffffff;
  --text-on-solid: #ffffff;       /* text on avatars, solid badges, gradients */
  --highlight-strong: rgba(255, 255, 255, 0.35);
  --highlight-soft: rgba(255, 255, 255, 0.25);
  --highlight-faint: rgba(255, 255, 255, 0.06);
  --spinner-track: rgba(255, 255, 255, 0.4);
  --shadow-accent: 0 8px 20px -10px rgba(37, 99, 235, 0.85);
  --shadow-brand: 0 6px 16px -6px rgba(37, 99, 235, 0.75);
  --company-gradient: linear-gradient(135deg, #0f766e, #0e7490);
  --gradient-success: linear-gradient(90deg, #059669, #34d399);
  --gradient-info: linear-gradient(90deg, #2563eb, #60a5fa);
  --gradient-warning: linear-gradient(90deg, #d97706, #fbbf24);
  --cover-sheen: radial-gradient(circle at 80% -20%, rgba(255, 255, 255, 0.35), transparent 55%);
  --stripes: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255, 255, 255, 0.06) 5px 10px);

  /* Avatar palette: dark enough for white initials */
  --avatar-1: linear-gradient(135deg, #1e40af, #0369a1);
  --avatar-2: linear-gradient(135deg, #0f766e, #0e7490);
  --avatar-3: linear-gradient(135deg, #9f1239, #be123c);
  --avatar-4: linear-gradient(135deg, #9a3412, #b45309);
  --avatar-5: linear-gradient(135deg, #1d4ed8, #2563eb);
  --avatar-6: linear-gradient(135deg, #065f46, #0f766e);
  --avatar-7: linear-gradient(135deg, #334155, #475569);
  --avatar-8: linear-gradient(135deg, #0c4a6e, #1e40af);

  /* Government agency badges */
  --gov-sss: linear-gradient(135deg, #1e40af, #2563eb);
  --gov-philhealth: linear-gradient(135deg, #065f46, #059669);
  --gov-pagibig: linear-gradient(135deg, #9f1239, #dc2626);
  --gov-bir: linear-gradient(135deg, #334155, #475569);
}

/* ==========================================================================
   Light theme (default)
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg-base: #eaf0f8;
  --blob-1: rgba(59, 130, 246, 0.30);
  --blob-2: rgba(14, 165, 233, 0.24);
  --blob-3: rgba(45, 212, 191, 0.26);

  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-hover: rgba(255, 255, 255, 0.68);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glass-fallback: rgba(255, 255, 255, 0.97);
  --panel-bg: rgba(255, 255, 255, 0.90);
  --panel-bg-strong: rgba(255, 255, 255, 0.97);
  --surface-solid: #ffffff;         /* fully opaque, for sticky cells */
  --panel-border: rgba(15, 23, 42, 0.09);
  --surface-sunken: rgba(15, 23, 42, 0.04);
  --surface-hover: rgba(15, 23, 42, 0.045);
  --surface-active: rgba(15, 23, 42, 0.08);
  --divider: rgba(15, 23, 42, 0.08);
  --scrim: rgba(15, 23, 42, 0.38);

  --text: #0f172a;
  --text-muted: #475569;
  --text-subtle: #5b6477;

  --text-on-accent: #ffffff;
  --accent: #1d4ed8;
  --accent-gradient: linear-gradient(135deg, #2563eb 0%, #0ea5e9 55%, #14b8a6 130%);
  --accent-solid: #2563eb;
  --accent-solid-hover: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.10);
  --ring: #2563eb;

  --success: #047857;
  --success-soft: rgba(4, 120, 87, 0.10);
  --success-solid: #15803d;
  --warning: #92400e;
  --warning-soft: rgba(217, 119, 6, 0.13);
  --danger: #b91c1c;
  --danger-soft: rgba(220, 38, 38, 0.10);
  --danger-solid: #dc2626;
  --info: #1d4ed8;
  --info-soft: rgba(37, 99, 235, 0.10);
  --overtime: #0e7490;
  --overtime-soft: rgba(14, 116, 144, 0.10);
  --neutral: #526077;
  --neutral-soft: rgba(82, 96, 119, 0.10);

  --chart-1: #2563eb;
  --chart-2: #0d9488;
  --chart-3: #ea580c;
  --chart-4: #db2777;
  --chart-5: #64748b;
  --chart-6: #65a30d;
  --chart-grid: rgba(15, 23, 42, 0.08);
  --chart-text: #475569;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow: 0 8px 24px -10px rgba(15, 23, 42, 0.18);
  --shadow-lg: 0 24px 60px -16px rgba(15, 23, 42, 0.28);
  --shadow-lift: 0 16px 36px -14px rgba(15, 23, 42, 0.26);
}

/* ==========================================================================
   Dark theme (opt-in via the top bar toggle)
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  /* ---- Background mesh (dark) ----------------------------------------- */
  --bg-base: #07111f;
  --blob-1: rgba(37, 99, 235, 0.50);   /* blue */
  --blob-2: rgba(14, 165, 233, 0.34);  /* sky  */
  --blob-3: rgba(20, 184, 166, 0.30);  /* teal   */

  /* ---- Surfaces -------------------------------------------------------- */
  /* Glass: sidebar, top bar, stat cards */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-hover: rgba(255, 255, 255, 0.11);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --glass-fallback: rgba(17, 27, 48, 0.97);
  /* Near-solid panels: tables, forms, long text (readability rule) */
  --panel-bg: rgba(13, 22, 40, 0.88);
  --panel-bg-strong: rgba(15, 24, 44, 0.95);   /* modals, dropdowns */
  --surface-solid: #0f1a2e;
  --panel-border: rgba(255, 255, 255, 0.10);
  --surface-sunken: rgba(255, 255, 255, 0.05); /* inputs, table heads */
  --surface-hover: rgba(255, 255, 255, 0.06);
  --surface-active: rgba(255, 255, 255, 0.10);
  --divider: rgba(255, 255, 255, 0.08);
  --scrim: rgba(2, 8, 23, 0.62);

  /* ---- Text ------------------------------------------------------------ */
  --text: #f1f5fb;
  --text-muted: #b1bccd;
  --text-subtle: #8f9bb0;
  --text-on-accent: #ffffff;

  /* ---- Accent ---------------------------------------------------------- */
  --accent: #7cb4ff;              /* links and accent text on dark */
  --accent-solid: #2563eb;        /* button fill, white text = 5.2:1 */
  --accent-solid-hover: #3b82f6;
  --accent-soft: rgba(96, 165, 250, 0.16);
  --accent-gradient: linear-gradient(135deg, #2563eb 0%, #0ea5e9 55%, #14b8a6 130%);
  --ring: #93c5fd;

  /* ---- Status (text colour + soft fill; always paired with icon + label) */
  --success: #4ade80;
  --success-soft: rgba(74, 222, 128, 0.14);
  --success-solid: #15803d;
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.14);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.14);
  --danger-solid: #dc2626;
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, 0.15);
  --overtime: #67e8f9;
  --overtime-soft: rgba(34, 211, 238, 0.14);
  --neutral: #a3adc0;
  --neutral-soft: rgba(163, 173, 192, 0.14);

  /* ---- Charts ---------------------------------------------------------- */
  --chart-1: #60a5fa;
  --chart-2: #2dd4bf;
  --chart-3: #fb923c;
  --chart-4: #f472b6;
  --chart-5: #94a3b8;
  --chart-6: #a3e635;
  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-text: #b1bccd;

  /* ---- Shadows --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 16px 36px -12px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   Version 2 · "Clean" direction (applies only to <body class="v2">)
   Flat white cards on a soft canvas, solid navy sidebar, Forti mascot.
   ========================================================================== */
.v2 {
  --v2-canvas: #eef3fa;
  --v2-card: #ffffff;
  --v2-card-border: rgba(15, 23, 42, 0.06);
  --v2-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 34px -20px rgba(15, 23, 42, 0.22);
  --v2-card-shadow-hover: 0 1px 2px rgba(15, 23, 42, 0.04), 0 22px 40px -20px rgba(15, 23, 42, 0.30);
  --v2-card-pad: 22px;

  --v2-sidebar-bg: linear-gradient(180deg, #0b1f3a 0%, #0c2a52 100%);
  --v2-sidebar-text: #c7d4e8;
  --v2-sidebar-text-strong: #ffffff;
  --v2-sidebar-muted: #8397b8;
  --v2-sidebar-accent: #7cc4ff;
  --v2-sidebar-hover: rgba(255, 255, 255, 0.06);
  --v2-sidebar-active: rgba(255, 255, 255, 0.11);
  --v2-sidebar-border: rgba(255, 255, 255, 0.09);

  --v2-ink-card: linear-gradient(160deg, #0b1f3a 0%, #102c55 100%);
  --v2-on-ink: #ffffff;
  --v2-on-ink-muted: #a9bad4;
  --v2-ink-divider: rgba(255, 255, 255, 0.10);
  --v2-ink-chip: rgba(255, 255, 255, 0.10);

  --hero-gradient: linear-gradient(125deg, #1e3a8a 0%, #1d4ed8 55%, #0369a1 100%);
  --hero-glow: radial-gradient(circle at 85% 20%, rgba(125, 211, 252, 0.45), transparent 55%);
  --hero-ring: rgba(255, 255, 255, 0.10);
  --on-hero: #ffffff;
  --on-hero-muted: rgba(255, 255, 255, 0.86);
  --on-hero-btn-ghost: rgba(255, 255, 255, 0.14);

  --v2-display: clamp(2rem, 3.4vw, 2.75rem);
  --v2-num-xl: 2.25rem;
  --ring-size: 172px;
  --ring-stroke: 12px;
  --bars-h: 150px;
  --bar-w: 14px;
  --cal-hour-h: 76px;
  --cal-time-w: 44px;
  --peek-cover-h: 96px;
  --stripes-strong: repeating-linear-gradient(135deg, rgba(15, 23, 42, 0.07) 0 6px, transparent 6px 12px);

  /* Mascot */
  --mascot-body-top: #ffffff;
  --mascot-body-bottom: #dbeafe;
  --mascot-rim: #1d4ed8;
  --mascot-rim-w: 7px;
  --mascot-ink: #0f172a;
  --mascot-cheek: #fda4af;
  --mascot-board: #f59e0b;
  --mascot-paper: #ffffff;
  --mascot-clip: #334155;
  --mascot-tick: #059669;
  --mascot-line: #94a3b8;
  --mascot-bulb: #38bdf8;
  --mascot-sparkle: #fbbf24;
  --mascot-sparkle-alt: #7dd3fc;
  --mascot-shadow: rgba(15, 23, 42, 0.16);
  --mascot-hero-w: 210px;
  --mascot-help-w: 92px;
  --mascot-empty-w: 128px;
  --mascot-bob-dur: 4s;
  --mascot-blink-dur: 5s;
  --mascot-wave-dur: 2.6s;
  --mascot-twinkle-dur: 1.8s;
}

[data-theme="dark"] .v2 {
  --v2-canvas: #07111f;
  --v2-card: #0f1a2e;
  --v2-card-border: rgba(255, 255, 255, 0.07);
  --v2-card-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.7);
  --v2-card-shadow-hover: 0 22px 40px -20px rgba(0, 0, 0, 0.8);
  --v2-sidebar-bg: linear-gradient(180deg, #081528 0%, #0a1f3d 100%);
  --v2-ink-card: linear-gradient(160deg, #0a1a33 0%, #10305c 100%);
  --stripes-strong: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 6px, transparent 6px 12px);
  --mascot-shadow: rgba(0, 0, 0, 0.4);
}

/* ---- Version 3 mascot: "bot" style (used where <body data-mascot="bot">) ---- */
.v2 {
  --bot-shell-a: #3b82f6;
  --bot-shell-b: #1d4ed8;
  --bot-visor: #0b1b33;
  --bot-ear: #0b1b33;
  --bot-glow: #ffffff;
  --bot-glow-halo: rgba(125, 211, 252, 0.9);
  --bot-cheek: #38bdf8;
  --bot-heart: #fb7185;
  --bot-spark: #fbbf24;
  --bot-spark-alt: #7dd3fc;
  --bot-confetti-a: #fb7185;
  --bot-confetti-b: #34d399;
  --bot-confetti-c: #a5b4fc;
  --bot-card: #ffffff;
  --bot-card-ink: #94a3b8;
  --bot-lanyard: #0b1b33;
  --bot-bubble: #ffffff;
  --bot-z: #3b82f6;
  --bot-shadow: rgba(15, 23, 42, 0.14);
  --bot-stroke-w: 6px;
  --bot-stroke-thin: 4px;
  --bot-sheet-art: 200px;
}
[data-theme="dark"] .v2 {
  --bot-visor: #050d1a;
  --bot-ear: #050d1a;
  --bot-bubble: #e2e8f0;
  --bot-z: #7dd3fc;
  --bot-shadow: rgba(0, 0, 0, 0.45);
}
/* On the blue hero banner Forti wears a light shell so it doesn't blend in */
.v2[data-mascot="bot"] .hero-card { --bot-shell-a: #ffffff; --bot-shell-b: #cfe3ff; --bot-shadow: rgba(2, 8, 23, 0.25); }

/* ---- Version 4 mascot: "guardian" style (used where <body data-mascot="guardian">) ---- */
.v2 {
  --guard-shell-a: #ffffff;
  --guard-shell-b: #dce8fb;
  --guard-shell-edge: #b8cdee;
  --guard-visor: #0b1b33;
  --guard-visor-rim: #3b82f6;
  --guard-emblem-f: #ffffff;
  --guard-nub-core: #7dd3fc;
  --guard-visor-rim-w: 3px;
}
[data-theme="dark"] .v2 {
  --guard-shell-b: #c7d9f6;
  --guard-shell-edge: #8fb0e3;
  --guard-visor: #050d1a;
}
.v2[data-mascot="guardian"] .hero-card { --bot-shadow: rgba(2, 8, 23, 0.25); --guard-shell-edge: #ffffff; }

/* ---- Version 5 mascot: "hover" style (used where <body data-mascot="hover">) ---- */
.v2 {
  --hover-glow-core: rgba(125, 211, 252, 0.95);
  --hover-glow-edge: rgba(125, 211, 252, 0);
  --hover-shadow: rgba(15, 23, 42, 0.16);
  --hover-band-w: 3px;
  --hover-rise: -6px;
  --hover-dur: 3.2s;
  /* Flat palette: solid fills, no outlines, gradients or glows */
  --flat-shell: #2563eb;       /* v3's solid blue */
  --flat-accent: #1e40af;      /* mitts, crest, rivets */
  --flat-band: #7dd3fc;        /* pod band */
  --flat-visor: #0b1b33;
  --flat-light: #7dd3fc;
}
[data-theme="dark"] .v2 { --hover-shadow: rgba(0, 0, 0, 0.5); --flat-shell: #3b82f6; --flat-accent: #2563eb; --flat-visor: #050d1a; }
.v2[data-mascot="hover"] .hero-card { --hover-shadow: rgba(2, 8, 23, 0.3); --bot-shell-a: #ffffff; --bot-shell-b: #cfe3ff; --flat-accent: #2563eb; }
.v2[data-mascot="reach"] .hero-card { --hover-shadow: rgba(2, 8, 23, 0.3); --bot-shell-a: #ffffff; --bot-shell-b: #cfe3ff; --flat-accent: #2563eb; }
.v2[data-mascot="reach"] .auth__brand { --hover-shadow: rgba(2, 8, 23, 0.3); --bot-shell-a: #ffffff; --bot-shell-b: #cfe3ff; --flat-accent: #2563eb; }

/* Tooltips (light and dark) */
:root, [data-theme="light"] { --tooltip-bg: #0f172a; --tooltip-text: #ffffff; }
[data-theme="dark"] { --tooltip-bg: #e2e8f0; --tooltip-text: #0f172a; }