/* =========================================================================
   Daraja Design System — colors and type
   Extracted from: daraja-dashboard (Next.js/Tailwind/shadcn) + payroll (Flutter)
   + Payroll.fig (Figma source of truth)
   ========================================================================= */

/* ---------- Web fonts ---------- */
@font-face { font-family: "Trap"; src: url("./fonts/Trap-Light.otf") format("opentype");      font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Trap"; src: url("./fonts/Trap-Regular.otf") format("opentype");    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Trap"; src: url("./fonts/Trap-Medium.otf") format("opentype");     font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Trap"; src: url("./fonts/Trap-SemiBold.otf") format("opentype");   font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Trap"; src: url("./fonts/Trap-Bold.otf") format("opentype");       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Trap"; src: url("./fonts/Trap-ExtraBold.otf") format("opentype");  font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Trap"; src: url("./fonts/Trap-Black.otf") format("opentype");      font-weight: 900; font-style: normal; font-display: swap; }

/* Secondary UI typeface used across the web dashboard — load from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap");

:root {
  /* -------- Brand / primitive colors -------- */
  --daraja-black:        #000000;   /* primary action + card surface */
  --daraja-white:        #ffffff;
  --daraja-ink:          #130F26;   /* near-black used for icons / decoration */
  --daraja-wordmark-grey:#D9D9D9;   /* middle layer of the logo mark */

  /* -------- Neutral scale (derived from Figma usage) -------- */
  --neutral-50:  #FBFBFB;           /* lightest surface */
  --neutral-75:  #F9F9F9;           /* card fill */
  --neutral-100: #F7F7FF;           /* table header tint (has a violet hint) */
  --neutral-150: #F3F3F3;
  --neutral-200: #EBEBEB;
  --neutral-300: #DCDCDC;           /* primary border / divider */
  --neutral-350: #D9D9D9;
  --neutral-400: #BBBBBB;           /* muted text / placeholder */
  --neutral-500: #9A9A9A;           /* secondary text */
  --neutral-600: #6F737B;           /* body muted */
  --neutral-700: #60646C;           /* table header text */
  --neutral-800: #454545;           /* strong muted */
  --neutral-900: #222222;           /* heading text */
  --neutral-950: #0A0A0A;           /* almost-black for important labels */

  /* -------- Semantic accents (deliberately small palette) -------- */
  --success:           #00BA07;
  --success-soft:      #CFFDD0;     /* success badge fill */
  --success-softer:    #EAFFEE;
  --success-lime:      #F3FFDB;     /* "verified" tint */
  --warning:           #FFC44D;     /* pending */
  --warning-soft:      #FFF1D0;
  --danger:            #E5484D;
  --danger-soft:       #FFE3E3;
  --info:              #2563EB;     /* accent blue used on filter chips */
  --info-soft:         #EBF2FA;     /* avatar/profile tint */
  --info-softer:       #EDF1FF;     /* input fill (mobile) */
  --info-border:       #E7EEFF;

  /* -------- Foreground / background aliases -------- */
  --bg:        var(--daraja-white);
  --bg-muted:  var(--neutral-75);
  --bg-subtle: var(--neutral-100);
  --surface-card: var(--daraja-white);
  --surface-dark: var(--daraja-black);    /* the brand "card" surface */
  --border:    var(--neutral-300);
  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-400);

  --fg:        var(--daraja-black);
  --fg-1:      var(--daraja-black);       /* primary text */
  --fg-2:      var(--neutral-700);        /* secondary text */
  --fg-3:      var(--neutral-600);        /* muted body */
  --fg-4:      var(--neutral-500);        /* placeholder / meta */
  --fg-5:      var(--neutral-400);        /* disabled */
  --fg-inverse: var(--daraja-white);

  /* -------- Type families -------- */
  --font-display: "Trap", "Clash Display", ui-sans-serif, system-ui, sans-serif;
  --font-ui:      "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-numeric: "Poppins", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, "IBM Plex Mono", Menlo, monospace;

  /* -------- Type scale (dashboard-first, compact) -------- */
  --text-xxs: 10px;   /* badges, meta */
  --text-xs:  11px;   /* secondary labels */
  --text-sm:  12px;   /* table rows, body */
  --text-md:  13px;   /* table headers, buttons */
  --text-base:14px;   /* nav, inputs */
  --text-lg:  16px;
  --text-xl:  18px;   /* KPI values */
  --text-2xl: 22px;   /* section headers (mobile) */
  --text-3xl: 24px;   /* page title */
  --text-4xl: 28px;
  --text-5xl: 36px;   /* marketing / hero */

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;

  --tracking-tight: -0.035em;   /* Figma default for IBM Plex */
  --tracking-ui:    -0.01em;
  --tracking-wide:   0.015em;

  /* -------- Radius -------- */
  --radius-xs: 2px;     /* badges (square-ish) */
  --radius-sm: 4px;
  --radius-md: 5px;     /* buttons, inputs */
  --radius-lg: 6px;     /* cards, KPIs */
  --radius-xl: 8px;
  --radius-2xl:10px;    /* app screen outer */
  --radius-3xl:20px;    /* dark card, bottom sheet */
  --radius-pill: 999px;

  /* -------- Spacing -------- */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 64px;

  /* -------- Shadows / elevation -------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-custom: 0 4px 8px rgba(0,0,0,0.03);      /* from tailwind config */
  --shadow-card:   0 4px 8px rgba(0,0,0,0.08);      /* hover on KPI cards */
  --shadow-sheet:  20px 20px 20px rgba(0,0,0,0.10); /* from Figma bottom sheets */
  --shadow-overlay: 0 10px 30px rgba(0,0,0,0.18);

  /* -------- Motion -------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 320ms;
}

/* =========================================================================
   Semantic element styles — use these by default
   ========================================================================= */

html { color: var(--fg-1); background: var(--bg); -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-1); }

/* Display (Trap) is reserved for big moments — hero numbers, marketing titles,
   app-screen headers. Dashboard UI defaults to IBM Plex Sans. */
h1, .h1 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
h2, .h2 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h3, .h3 { font-family: var(--font-ui);      font-size: var(--text-3xl); font-weight: 600; line-height: var(--leading-snug);  letter-spacing: var(--tracking-tight); }
h4, .h4 { font-family: var(--font-ui);      font-size: var(--text-2xl); font-weight: 600; line-height: var(--leading-snug); }
h5, .h5 { font-family: var(--font-ui);      font-size: var(--text-xl);  font-weight: 600; line-height: var(--leading-snug); }
h6, .h6 { font-family: var(--font-ui);      font-size: var(--text-lg);  font-weight: 600; line-height: var(--leading-snug); }

p, .p { font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-1); }
.p-sm  { font-size: var(--text-sm); }
.p-xs  { font-size: var(--text-xs); color: var(--fg-3); }
.muted { color: var(--fg-3); }
.meta  { font-size: var(--text-xxs); color: var(--fg-4); letter-spacing: var(--tracking-wide); }

.numeric { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
code, kbd, pre { font-family: var(--font-mono); font-size: 12px; }
kbd { display: inline-flex; align-items: center; padding: 0 6px; height: 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg-3); font-size: 11px; }

/* Utility text classes mirroring the dashboard's conventions */
.text-table-row    { font-size: var(--text-sm); color: var(--fg-1); }
.text-table-header { font-size: var(--text-md); color: var(--fg-1); font-weight: 500; }
.text-badge        { font-size: var(--text-xxs); font-weight: 500; }