/* ==========================================================================
   Nyumba PMS — Design tokens
   --------------------------------------------------------------------------
   Every colour, size and duration in the system comes from here. Components
   never hard-code a value, which is what makes the four themes and dark mode
   a data change rather than a rewrite.

   Themes are applied with data-theme on <html>; appearance with data-mode.
   ========================================================================== */

/* --- Typefaces ---------------------------------------------------------- */
/* Self-hosted. A shared host should never depend on a font CDN being up, and
   a Nairobi connection should not pay a round trip to fetch a typeface. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-display: swap; font-weight: 400;
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-display: swap; font-weight: 500;
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-display: swap; font-weight: 600;
  src: url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

/* ==========================================================================
   Palette — Limestone (default)
   Surveyor's paper, deep green, brass. Chosen from the trade's own artefacts:
   title deeds, stack plans, signage.
   ========================================================================== */

:root,
[data-theme='limestone'] {
  --brand-h: 158; --brand-s: 45%; --brand-l: 20%;

  --brand:          #1C4A3A;
  --brand-hover:    #163D30;
  --brand-soft:     #E4EBE5;
  --brand-contrast: #FFFFFF;

  --accent:         #A8792C;
  --accent-hover:   #8F6624;
  --accent-strong:  #8A6320;   /* filled buttons — 5.40:1 with white text */
  --accent-ink:     #7A5719;   /* accent text on accent-soft — 6.10:1 */
  --accent-soft:    #F5EEDF;
  --accent-contrast:#FFFFFF;
  --danger-contrast:#FFFFFF;

  --paper:      #EFF2EC;
  --surface:    #FFFFFF;
  --surface-2:  #F6F8F3;
  --surface-3:  #EDF1E8;
  --overlay:    rgba(17, 24, 21, .45);

  --ink:        #111815;
  --ink-2:      #3D4C43;
  /* ink-3 and ink-4 are measured, not eyeballed: both clear WCAG AA for small
     text on --surface and on --paper. #6C7C72 looked right but tested at
     4.41:1, which fails. */
  --ink-3:      #5C6B62;   /* 5.62:1 on white, 4.98:1 on paper */
  --ink-4:      #68786E;   /* 4.67:1 on white — the faintest permitted text */

  --line:       #DCE2D8;
  --line-2:     #C4CDBE;

  --pos: #2F7D5E; --pos-soft: #E3F0EA; --pos-ink: #1F5A42;
  --neg: #B3402F; --neg-soft: #F8E6E2; --neg-ink: #8C3123;
  --warn:#C08A2E; --warn-soft:#FAF0DC; --warn-ink:#7E5A1B;   /* 5.52:1 on warn-soft */
  --info:#3B6EA5; --info-soft:#E4EDF6; --info-ink:#2C5580;
  --neutral:#6C7C72; --neutral-soft:#EDF0EB;
}

/* --- Zamora: the client's leaf green and earth ------------------------- */
[data-theme='zamora'] {
  --brand:#2E7D32; --brand-hover:#256828; --brand-soft:#E5F0E4; --brand-contrast:#FFFFFF;
  --accent:#7A4E2A; --accent-hover:#653F22; --accent-soft:#F2E9E1; --accent-contrast:#FFFFFF;
  --paper:#F1F4EE; --surface:#FFFFFF; --surface-2:#F7FAF4; --surface-3:#EDF2E9;
  --ink:#14190F; --ink-2:#3F4A38; --ink-3:#5D6956; --ink-4:#697662;
  --line:#DDE4D8; --line-2:#C6D0BF;
}

/* --- Slate: cool neutral with copper ---------------------------------- */
[data-theme='slate'] {
  --brand:#2C3A47; --brand-hover:#233039; --brand-soft:#E5E9ED; --brand-contrast:#FFFFFF;
  --accent:#B5651D; --accent-hover:#985417; --accent-soft:#F7ECE0; --accent-contrast:#FFFFFF;
  --paper:#F0F2F4; --surface:#FFFFFF; --surface-2:#F7F9FA; --surface-3:#EAEEF1;
  --ink:#12171C; --ink-2:#3B454E; --ink-3:#586470; --ink-4:#64717C;
  --line:#DCE1E6; --line-2:#C3CBD2;
}

/* --- Harbour: deep indigo with sand ------------------------------------ */
[data-theme='harbour'] {
  --brand:#243A5E; --brand-hover:#1C2E4B; --brand-soft:#E4E9F1; --brand-contrast:#FFFFFF;
  --accent:#C08A2E; --accent-hover:#A37426; --accent-soft:#F9F0DE; --accent-contrast:#FFFFFF;
  --paper:#EEF1F5; --surface:#FFFFFF; --surface-2:#F6F8FB; --surface-3:#E8EDF3;
  --ink:#111621; --ink-2:#3A4356; --ink-3:#57617A; --ink-4:#636D86;
  --line:#DBE1EA; --line-2:#C2CAD8;
}

/* ==========================================================================
   Dark mode
   Not an inversion — surfaces lift with elevation rather than dropping,
   and the accent is warmed so brass still reads as brass on near-black.
   ========================================================================== */

[data-mode='dark'] {
  --brand:#2E6B54; --brand-hover:#378065; --brand-soft:#16241E; --brand-contrast:#FFFFFF;
  --accent:#C79A45; --accent-hover:#D6AB58; --accent-strong:#C79A45; --accent-soft:#2A2417;
  --accent-ink:#DCB268; --accent-contrast:#12180F;
  /* On near-black, the signal colours are light, so filled buttons take dark
     text rather than white. */
  --danger-contrast:#1A0F0C;

  --paper:#0D120F; --surface:#161D19; --surface-2:#1E2721; --surface-3:#26312A;
  --overlay: rgba(0, 0, 0, .62);

  --ink:#E8EDE7; --ink-2:#B6C3B9; --ink-3:#8FA095; --ink-4:#849489;  /* 5.37:1 on surface */
  --line:#2A342D; --line-2:#3A4740;

  --pos:#4CA37D; --pos-soft:#15241D; --pos-ink:#7FC5A5;
  --neg:#D96A55; --neg-soft:#2A1815; --neg-ink:#E89584;
  --warn:#E0A94A; --warn-soft:#2A2113; --warn-ink:#EDC57F;
  --info:#6396CE; --info-soft:#151F2A; --info-ink:#93B9E2;
  --neutral:#8FA095; --neutral-soft:#1E2721;
}

[data-mode='dark'][data-theme='zamora'] {
  --brand:#3E9642; --brand-hover:#4CA850; --accent:#B08154;
  --paper:#0B0F09; --surface:#151A12; --surface-2:#1D241A; --surface-3:#252E22;
  --ink:#E7EDE3; --line:#2B3327; --line-2:#3A4435;
}
[data-mode='dark'][data-theme='slate'] {
  --brand:#4A6076; --brand-hover:#587189; --accent:#D08843;
  --paper:#0C0F12; --surface:#151A1F; --surface-2:#1D242A; --surface-3:#252E35;
  --ink:#E4E9EE; --line:#28313A; --line-2:#374350;
}
[data-mode='dark'][data-theme='harbour'] {
  --brand:#3E5C8A; --brand-hover:#4B6C9E; --accent:#D6A954;
  --paper:#0A0D13; --surface:#131822; --surface-2:#1B212D; --surface-3:#232B39;
  --ink:#E3E8F0; --line:#262E3D; --line-2:#354052;
}

/* ==========================================================================
   Typography, spacing, shape, motion
   ========================================================================== */

:root {
  /* Three voices: display for headlines, sans for interface, mono for money.
     Money is always mono and always tabular so columns of figures line up. */
  --font-display: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: .6875rem;  /* 11px — pills, table meta        */
  --text-xs:  .75rem;    /* 12px — captions, help text      */
  --text-sm:  .8125rem;  /* 13px — table cells, labels      */
  --text-base:.875rem;   /* 14px — interface default        */
  --text-md:  .9375rem;  /* 15px — body copy                */
  --text-lg:  1.0625rem; /* 17px — card titles              */
  --text-xl:  1.3125rem; /* 21px — section headings         */
  --text-2xl: 1.625rem;  /* 26px — page titles              */
  --text-3xl: 2.125rem;  /* 34px — KPI figures              */
  --text-4xl: 2.875rem;  /* 46px — hero figures             */

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal:1.55;
  --leading-loose: 1.7;

  --tracking-tight:  -.022em;
  --tracking-normal: 0;
  --tracking-wide:   .04em;
  --tracking-caps:   .085em;

  /* 8px grid, with half steps where controls need them */
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;  --space-10: 2.5rem;
  --space-12: 3rem;  --space-16: 4rem;

  --radius-xs: 4px; --radius-sm: 6px; --radius: 9px;
  --radius-lg: 13px; --radius-xl: 18px; --radius-full: 999px;

  /* Shadows are reserved for things that genuinely float. Cards use a
     hairline border instead, which keeps dense screens calm. */
  --shadow-sm: 0 1px 2px rgba(17,24,21,.06);
  --shadow:    0 2px 4px rgba(17,24,21,.05), 0 6px 16px -8px rgba(17,24,21,.16);
  --shadow-lg: 0 4px 8px rgba(17,24,21,.06), 0 20px 44px -16px rgba(17,24,21,.24);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);

  --duration-fast: 120ms;
  --duration:      180ms;
  --duration-slow: 280ms;
  --ease:        cubic-bezier(.2, 0, .2, 1);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.1);

  --sidebar-width: 248px;
  --sidebar-collapsed: 72px;
  --topbar-height: 60px;
  --content-max: 1440px;

  --z-sticky: 20; --z-drawer: 60; --z-modal: 70; --z-toast: 80; --z-palette: 90;
}

[data-mode='dark'] {
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 2px 4px rgba(0,0,0,.35), 0 6px 16px -8px rgba(0,0,0,.6);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 20px 44px -16px rgba(0,0,0,.7);
}

/* Compact density — for staff working long lists on small laptops. */
[data-density='compact'] {
  --space-3: .5rem; --space-4: .75rem; --space-5: 1rem; --space-6: 1.15rem;
  --topbar-height: 52px;
}