/* ===========================================================
   Design tokens — every colour and size in the product
   traces back to a value in this file.
   =========================================================== */

:root {
  /* --- Palette -------------------------------------------------
     Pine green reads institutional and calm; it is the colour of
     the brand, not of every button. Sand is the paper it sits on. */
  --pine-900: #0D2F23;
  --pine-700: #164537;
  --pine-600: #1D5943;
  --pine-500: #2A7358;
  --pine-100: #DCEAE3;
  --pine-050: #F0F6F2;

  --ink-900: #14161C;
  --ink-700: #2E3239;
  --ink-500: #5A606B;
  --ink-400: #858B96;
  --ink-300: #B4B9C2;

  --paper:    #F7F6F3;
  --surface:  #FFFFFF;
  --surface-sunk: #EFEEE9;
  --line:     #E2E0DA;
  --line-strong: #CDCAC2;

  /* Bed states — these carry meaning, so they are named for it */
  --state-free:  #2A7358;
  --state-full:  #3E4A63;
  --state-fix:   #B4571C;
  --state-hold:  #7A5EA8;
  --state-clean: #2B7A94;

  --danger:  #A8331F;
  --danger-bg: #FBEDEA;
  --warn:    #8A5A05;
  --warn-bg: #FDF3DF;
  --good:    #1D5943;
  --good-bg: #E7F2EC;

  /* --- Type ----------------------------------------------------
     Display: Bricolage Grotesque, used only for headings and the
     big occupancy number. Body: Instrument Sans. Mono: Plex, for
     room numbers, IDs and money so columns align. */
  --font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --font-body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.375rem;
  --text-xl:   1.875rem;
  --text-2xl:  2.75rem;
  --text-hero: 4.5rem;

  /* --- Space --------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  --radius-sm: 4px;
  --radius:    7px;
  --radius-lg: 12px;

  /* Shadows stay almost invisible; depth comes from the hairline */
  --shadow-sm: 0 1px 2px rgba(20, 22, 28, 0.05);
  --shadow:    0 2px 8px rgba(20, 22, 28, 0.07);
  --shadow-lg: 0 12px 32px rgba(20, 22, 28, 0.13);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 120ms;
  --dur:      220ms;
  --dur-slow: 420ms;

  --header-h: 60px;
  --rail-w:   232px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink-900: #F2F1EE;
    --ink-700: #D6D4CE;
    --ink-500: #9C9A94;
    --ink-400: #7A7873;
    --ink-300: #55534F;

    --paper:   #131512;
    --surface: #1B1E1B;
    --surface-sunk: #232722;
    --line:    #2E322D;
    --line-strong: #3E433D;

    --pine-100: #1F3A2E;
    --pine-050: #17251E;
    --pine-600: #4FA383;
    --pine-500: #6BBB9C;

    --state-free: #4FA383;
    --state-full: #6B7A9B;
    --state-fix:  #D4823F;

    --danger-bg: #2E1A16;
    --warn-bg:   #2B2313;
    --good-bg:   #16281F;
  }
}