/* MyHR design tokens: the one place colours, type, spacing, radii, shadows and motion are set.
   Every other stylesheet uses these names; change a value here and it changes everywhere.
   Light is the default. Dark is chosen in the account menu (stored on the device) or follows
   the device when "Match device" is picked. Spec, with the motion table: docs/DESIGN.md. */

/* ------------------------------------------------------------------ Fonts
   IBM Plex Sans with IBM Plex Sans Arabic: one family drawn for both scripts, so Arabic text
   (the consent notice) sits at the same weight and height as the English beside it. Plex's
   figures are all one width, so times and amounts line up in columns without extra settings.
   Plex Mono is only for codes (set-up codes, keys). SIL Open Font License, files in /fonts. */
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }

/* ------------------------------------------------------------- Light (default) */
:root {
  color-scheme: light;

  /* Surfaces: a cool grey page with white cards on it. */
  --canvas: #F4F5F7;          /* page background */
  --surface: #FFFFFF;         /* cards, tables, menus */
  --surface-sunken: #F0F2F5;  /* table headings, wells */
  --surface-hover: #F6F7F9;   /* row and item hover */
  --line: #E3E6EA;            /* hairlines between and around things */
  --line-strong: #CDD2D9;     /* dividers that need to read */
  --control-line: #8C95A0;    /* borders of inputs and checkboxes (3:1 on white) */

  /* Text */
  --ink: #1A2029;             /* 16.4:1 on white */
  --ink-2: #3D4652;           /* secondary text, 9.6:1 */
  --muted: #5E6875;           /* labels and hints, 5.7:1 */
  --faint: #8A939E;           /* placeholders, disabled */

  /* The one accent: deep petrol teal. Links, the main action, focus, current page. */
  --accent: #0A6170;          /* 7.1:1 on white */
  --accent-hover: #084E5B;
  --accent-press: #073F49;
  --accent-tint: #E4F0F2;
  --accent-tint-2: #CCE3E7;
  --on-accent: #FFFFFF;
  --focus: #0A6170;
  --focus-halo: rgba(10, 97, 112, .22);

  /* Status: muted colours, always shown with an icon and a word (never colour alone).
     -fg is text and icon, -bg the fill, -line the edge. All -fg pass 4.5:1 on their -bg. */
  --good-fg: #2E6B41;    --good-bg: #E8F3EB;    --good-line: #BCD9C4;     /* present, approved, done */
  --warn-fg: #9A4B0E;    --warn-bg: #FCEFE1;    --warn-line: #EBC9A3;     /* late, not in yet, no clock-out, expiring */
  --pending-fg: #7A5B00; --pending-bg: #FAF3D4; --pending-line: #E2D08A;  /* waiting for a decision */
  --bad-fg: #A3352D;     --bad-bg: #FCEBE9;     --bad-line: #EDBDB7;      /* absent, declined, expired */
  --leave-fg: #5145A0;   --leave-bg: #EEEDFA;   --leave-line: #CFCBF0;    /* on leave */
  --info-fg: #2B5E86;    --info-bg: #E7F0F8;    --info-line: #C0D5E8;     /* public holiday, out for now */
  --neutral-fg: #5E6875; --neutral-bg: #EEF0F3; --neutral-line: #D6DAE0;  /* off, cancelled, not started */

  /* Depth: hairlines first; shadows only lift what floats. */
  --shadow-1: 0 1px 2px rgba(20, 28, 38, .05);
  --shadow-pop: 0 12px 32px -8px rgba(20, 28, 38, .20), 0 2px 6px rgba(20, 28, 38, .06);
  --shadow-press: inset 0 1px 2px rgba(20, 28, 38, .08);
  --backdrop: rgba(20, 28, 38, .32);
}

/* -------------------------------------------------------------------- Dark */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0E1216; --surface: #151A20; --surface-sunken: #11161B; --surface-hover: #1A2027;
  --line: #252D36; --line-strong: #34404C; --control-line: #66727F;
  --ink: #E5E9EE; --ink-2: #C3CBD4; --muted: #919CA8; --faint: #6B7682;
  --accent: #5BB5C2; --accent-hover: #79C6D1; --accent-press: #4AA3B0;
  --accent-tint: rgba(91, 181, 194, .13); --accent-tint-2: rgba(91, 181, 194, .24); --on-accent: #06262B;
  --focus: #79C6D1; --focus-halo: rgba(91, 181, 194, .28);
  --good-fg: #8CCB9E;    --good-bg: rgba(110, 190, 135, .13); --good-line: rgba(110, 190, 135, .32);
  --warn-fg: #F0B37A;    --warn-bg: rgba(230, 150, 80, .14);  --warn-line: rgba(230, 150, 80, .34);
  --pending-fg: #E6C866; --pending-bg: rgba(220, 190, 80, .13); --pending-line: rgba(220, 190, 80, .34);
  --bad-fg: #F09A92;     --bad-bg: rgba(230, 110, 100, .14);  --bad-line: rgba(230, 110, 100, .36);
  --leave-fg: #ADA6F2;   --leave-bg: rgba(150, 140, 240, .15); --leave-line: rgba(150, 140, 240, .36);
  --info-fg: #8DBDE6;    --info-bg: rgba(110, 170, 225, .14); --info-line: rgba(110, 170, 225, .34);
  --neutral-fg: #A3ADB8; --neutral-bg: rgba(160, 170, 185, .12); --neutral-line: rgba(160, 170, 185, .26);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-pop: 0 16px 40px -8px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-press: inset 0 1px 2px rgba(0, 0, 0, .4);
  --backdrop: rgba(0, 0, 0, .55);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --canvas: #0E1216; --surface: #151A20; --surface-sunken: #11161B; --surface-hover: #1A2027;
    --line: #252D36; --line-strong: #34404C; --control-line: #66727F;
    --ink: #E5E9EE; --ink-2: #C3CBD4; --muted: #919CA8; --faint: #6B7682;
    --accent: #5BB5C2; --accent-hover: #79C6D1; --accent-press: #4AA3B0;
    --accent-tint: rgba(91, 181, 194, .13); --accent-tint-2: rgba(91, 181, 194, .24); --on-accent: #06262B;
    --focus: #79C6D1; --focus-halo: rgba(91, 181, 194, .28);
    --good-fg: #8CCB9E;    --good-bg: rgba(110, 190, 135, .13); --good-line: rgba(110, 190, 135, .32);
    --warn-fg: #F0B37A;    --warn-bg: rgba(230, 150, 80, .14);  --warn-line: rgba(230, 150, 80, .34);
    --pending-fg: #E6C866; --pending-bg: rgba(220, 190, 80, .13); --pending-line: rgba(220, 190, 80, .34);
    --bad-fg: #F09A92;     --bad-bg: rgba(230, 110, 100, .14);  --bad-line: rgba(230, 110, 100, .36);
    --leave-fg: #ADA6F2;   --leave-bg: rgba(150, 140, 240, .15); --leave-line: rgba(150, 140, 240, .36);
    --info-fg: #8DBDE6;    --info-bg: rgba(110, 170, 225, .14); --info-line: rgba(110, 170, 225, .34);
    --neutral-fg: #A3ADB8; --neutral-bg: rgba(160, 170, 185, .12); --neutral-line: rgba(160, 170, 185, .26);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-pop: 0 16px 40px -8px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
    --shadow-press: inset 0 1px 2px rgba(0, 0, 0, .4);
    --backdrop: rgba(0, 0, 0, .55);
  }
}

/* -------------------------------------------------- Type, space, shape, motion */
:root {
  --font-sans: 'Plex', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Arabic', 'Geeza Pro', Tahoma, sans-serif;
  --font-mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (size / line height), every line height on the 4 px grid. */
  --text-xs: 12px;   --lh-xs: 16px;    /* captions, axis ticks */
  --text-sm: 13px;   --lh-sm: 20px;    /* labels, chips, table headings */
  --text-md: 15px;   --lh-md: 24px;    /* body (16 px on phones, see app.css) */
  --text-lg: 17px;   --lh-lg: 24px;    /* lede, card titles */
  --text-xl: 20px;   --lh-xl: 28px;    /* section headings */
  --text-2xl: 28px;  --lh-2xl: 36px;   /* page titles (24/32 on phones) */
  --text-3xl: 40px;  --lh-3xl: 44px;   /* the clock-in confirmation time, key figures */
  --weight-regular: 400; --weight-medium: 500; --weight-strong: 600;

  /* Space: a strict 4 / 8 px grid. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Radii by role, not one size for everything. */
  --r-control: 6px;   /* buttons, inputs */
  --r-card: 10px;     /* cards, tables, panels */
  --r-pop: 12px;      /* menus, dialogs, toasts */
  --r-pill: 999px;    /* status chips, avatars, toggles */

  /* Sizes */
  --control-h: 36px;  /* buttons and inputs on a desk; 44 px on touch screens */
  --control-h-sm: 30px;
  --rail-w: 240px;
  --topbar-h: 56px;

  /* Tables: comfortable by default; compact is chosen above a table and kept on the device. */
  --cell-y: 12px; --cell-x: 16px;

  /* Motion: quick and quiet. Only transform and opacity are animated. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);       /* most things: fast start, soft landing */
  --ease-in: cubic-bezier(.4, 0, 1, 1);           /* things leaving */
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1); /* dialogs, the clock-in tick: a small overshoot */
  --dur-press: 120ms;   /* button press, hover */
  --dur-quick: 160ms;   /* toggles, menus, focus */
  --dur-base: 200ms;    /* toasts, rows leaving, entrance of each item */
  --dur-view: 220ms;    /* page to page */
  --stagger: 40ms;      /* gap between items in the first dashboard load */
}
:root[data-density="compact"] { --cell-y: 6px; --cell-x: 12px; }
@media (pointer: coarse) { :root { --control-h: 44px; --control-h-sm: 36px; } }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 1ms; --dur-quick: 1ms; --dur-base: 1ms; --dur-view: 1ms; --stagger: 0ms; }
}