/* ==========================================================================
   FactoryHajri UI - 01. VARIABLES (design tokens)
   --------------------------------------------------------------------------
   This file is the single source of truth. Colour, size, type - all from here.
   Never hard-code a hex or a px inside a component. Re-theming the app means
   changing this one file.

   Every class name starts with  fh-  so the kit can run alongside the old
   style.css and can never collide with Bootstrap.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- BRAND
     Navy = the cover of a register. Marigold = the working colour (turmeric),
     for actions only - never decoration. */
  /* His real brand navy, taken from the app's own stylesheet (--indigo /
     --indigo-deep) so migrated and unmigrated pages are the same colour
     during the transition, and so the PWA theme colour matches the topbar. */
  --fh-navy-900: #04122A;
  --fh-navy-800: #061A3C;
  --fh-navy-700: #0F2C5C;
  --fh-navy-600: #1B4079;
  --fh-navy-400: #4C6890;
  --fh-navy-100: #E8EEF8;

  --fh-marigold-700: #C96500;
  --fh-marigold-600: #E07600;
  --fh-marigold-500: #FD8605;
  --fh-marigold-300: #FFB963;
  --fh-marigold-100: #FFF1E0;

  /* ------------------------------------------------------------- SURFACES */
  --fh-paper:      #F5F7FB;          /* app background */
  --fh-surface:    #FFFFFF;          /* card */
  --fh-surface-2:  #FAFBFD;          /* soft block, table zebra */
  --fh-surface-3:  #EEF2F8;          /* section heading strip */
  --fh-overlay:    rgba(8, 24, 47, .55);

  /* ----------------------------------------------------------------- LINE */
  --fh-line:        #E3E8F0;
  --fh-line-strong: #CFD9E7;
  --fh-line-dark:   #1B3055;         /* on a navy background */

  /* ----------------------------------------------------------------- TEXT */
  --fh-text:       #0B1F3F;
  --fh-text-2:     #46566F;
  --fh-text-muted: #7C889B;
  --fh-text-on-dark:      #FFFFFF;
  --fh-text-on-dark-soft: rgba(255,255,255,.72);

  /* --------------------------------------------------------------- STATUS
     Bound to the hajri codes - identical across the whole app. */
  --fh-present:     #0F7A3D;  --fh-present-bg:  #E8F6ED;  --fh-present-line:#B7E0C6;
  --fh-absent:      #B3261E;  --fh-absent-bg:   #FDECEC;  --fh-absent-line: #F0BEBE;
  --fh-half:        #B77400;  --fh-half-bg:     #FFF4E0;  --fh-half-line:   #E8CF90;
  --fh-leave:       #1B4079;  --fh-leave-bg:    #E8EEF8;  --fh-leave-line:  #C3D3EA;
  --fh-night:       #4B3FBF;  --fh-night-bg:    #EEEBFC;  --fh-night-line:  #CFC9F3;
  --fh-info:        #1565C0;  --fh-info-bg:     #E7F0FB;  --fh-info-line:   #C2D9F2;
  --fh-off:         #6B7688;  --fh-off-bg:      #EDEFF3;  --fh-off-line:    #DDE2EA;

  /* HAJRI GRID FILLS - deliberately stronger than the chip backgrounds above.
     In a chip the colour sits behind coloured text; in the entry grid the FILL
     ITSELF is the information, read across 31 columns at a glance, so it has
     to carry on its own. Same hues as the chips, roughly twice the saturation. */
  --fh-cell-p:  #C9EAD0;   /* day / present */
  --fh-cell-n:  #D6D0F5;   /* night */
  --fh-cell-hd: #FBEBBB;   /* half day */
  --fh-cell-a:  #F6C6CC;   /* absent */
  --fh-cell-pl: #D5E0F5;   /* paid leave */
  --fh-cell-off:#E7E9EE;   /* weekly off / holiday */

  /* darker text for notes - readable on the tinted background */
  --fh-on-info-bg:    #10395F;
  --fh-on-present-bg: #0A5B30;
  --fh-on-half-bg:    #7A4E00;
  --fh-on-absent-bg:  #8C1C16;
  --fh-flag-row:      #FFFAF6;   /* a row that needs attention */
  --fh-shimmer:       #F3F6FA;   /* skeleton shimmer */

  /* --------------------------------------------------------- MODULE SPINE
     One colour per module. A 3px bar on the left edge of a card, like the
     coloured tabs on a paper register. Identification, not decoration. */
  --fh-mod-attendance: #0F7A3D;
  --fh-mod-salary:     #E07600;
  --fh-mod-workers:    #1B4079;
  --fh-mod-biometric:  #4B3FBF;
  --fh-mod-advance:    #B3261E;
  --fh-mod-piecework:  #8A6A00;
  --fh-mod-pettycash:  #1565C0;
  --fh-mod-reports:    #0E6E6E;

  /* ----------------------------------------------------------- TYPOGRAPHY
     IBM Plex Sans: a machine-age grotesque with clean, upright numerals, and
     Devanagari lives in the same family if the app is ever translated.
     IBM Plex Mono: DATA only - hajri codes, times, money, machine codes.
     That is the app's own voice. */
  --fh-font: "IBM Plex Sans", "IBM Plex Sans Devanagari", system-ui, -apple-system,
             "Segoe UI", Roboto, sans-serif;
  --fh-font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fh-text-xs:   .6875rem;   /* 11 - label, eyebrow */
  --fh-text-sm:   .8125rem;   /* 13 - meta, table */
  --fh-text-base: .9375rem;   /* 15 - body */
  --fh-text-md:   1.0625rem;  /* 17 - card heading */
  --fh-text-lg:   1.25rem;    /* 20 - section */
  --fh-text-xl:   1.5rem;     /* 24 - page title */
  --fh-text-2xl:  1.875rem;   /* 30 - stat */
  --fh-text-3xl:  2.375rem;   /* 38 - hero stat */

  --fh-lh-tight: 1.2;
  --fh-lh-snug:  1.35;
  --fh-lh-base:  1.55;

  --fh-fw-normal: 400;
  --fh-fw-medium: 500;
  --fh-fw-semi:   600;
  --fh-fw-bold:   700;

  --fh-track-label: .06em;    /* uppercase labels */
  --fh-track-tight: -.01em;   /* large headings */

  /* ---------------------------------------------------------------- SPACE
     A 4px scale. Never invent a value in between. */
  --fh-s1: 4px;   --fh-s2: 8px;   --fh-s3: 12px;  --fh-s4: 16px;
  --fh-s5: 20px;  --fh-s6: 24px;  --fh-s7: 32px;  --fh-s8: 40px;
  --fh-s9: 48px;  --fh-s10: 64px;

  /* --------------------------------------------------------------- RADIUS */
  --fh-r-sm:   8px;
  --fh-r-md:   12px;
  --fh-r-lg:   16px;
  --fh-r-pill: 999px;

  /* -------------------------------------------------------------- SHADOWS
     Soft and blue - black shadows look like plastic. */
  --fh-sh-xs: 0 1px 2px rgba(11,31,63,.06);
  --fh-sh-sm: 0 1px 3px rgba(11,31,63,.08), 0 1px 2px rgba(11,31,63,.04);
  --fh-sh-md: 0 4px 12px rgba(11,31,63,.08);
  --fh-sh-lg: 0 12px 28px rgba(11,31,63,.14);

  /* -------------------------------------------------------------- MOTION */
  --fh-ease: cubic-bezier(.2,.7,.3,1);
  --fh-dur-fast: 120ms;
  --fh-dur:      180ms;

  /* ------------------------------------------------------------- Z-INDEX
     Written down in one place - never write "z-index: 9999". */
  --fh-z-base:   1;
  --fh-z-sticky: 100;
  --fh-z-header: 200;
  --fh-z-drawer: 300;
  --fh-z-modal:  400;
  --fh-z-toast:  500;

  /* --------------------------------------------------------------- LAYOUT */
  --fh-rail-w:      248px;   /* desktop left rail */
  --fh-rail-w-slim: 76px;    /* icon-only rail */
  --fh-topbar-h:    60px;
  --fh-tabbar-h:    62px;    /* mobile bottom tab bar */
  --fh-content-max: 1440px;
  --fh-focus: 0 0 0 3px rgba(253,134,5,.45);
}

/* Tabular numerals everywhere so amounts and counts line up */
:root {
  --fh-num: "tnum" 1, "lnum" 1;
}

@media (prefers-reduced-motion: reduce) {
  :root { --fh-dur-fast: 0ms; --fh-dur: 0ms; }
}