/* MwaRent design tokens.
   Colour comes from the logo: navy house, red roof, blue windows.
   Red means money owed. Blue means something you can press. */

:root {
  /* Colour */
  --navy-950: #071238;
  --navy-900: #0b1b4d;   /* brand navy: hero, footer, ink */
  --navy-800: #13286a;
  --navy-700: #213a85;
  --navy-300: #8f9ccb;
  --red-600: #e3120b;    /* brand red: shapes */
  --red-text: #c40f08;   /* owed, as small text on light (4.5:1+) */
  --red-300: #ff7b73;    /* owed, on navy */
  --blue-600: #1d3fd8;   /* brand blue: actions */
  --blue-700: #1631ad;
  --blue-300: #8ea4ff;   /* actions, on navy */

  --paper: #f5f3ee;
  --paper-deep: #ebe8e0;
  --white: #ffffff;
  --ink: var(--navy-900);
  --ink-soft: #46527d;
  --ink-faint: #59628a;

  --rule: rgb(11 27 77 / 0.14);
  --rule-strong: rgb(11 27 77 / 0.32);
  --rule-on-navy: rgb(255 255 255 / 0.14);
  --text-on-navy: #ffffff;
  --text-on-navy-soft: #b4bde0;

  /* Type */
  --font-display: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --text-2xl: clamp(2rem, 1.35rem + 2.8vw, 3.75rem);
  --text-3xl: clamp(2.75rem, 1.4rem + 6vw, 6.25rem);
  --text-numeral: clamp(4rem, 2rem + 10vw, 10rem);

  --leading-tight: 0.98;
  --leading-snug: 1.15;
  --leading-body: 1.55;
  --tracking-display: -0.045em;
  --tracking-heading: -0.03em;
  --tracking-mono: -0.01em;
  --tracking-label: 0.08em;

  /* Space: 8px scale */
  --space-1: 0.5rem;   /*   8 */
  --space-2: 1rem;     /*  16 */
  --space-3: 1.5rem;   /*  24 */
  --space-4: 2rem;     /*  32 */
  --space-6: 3rem;     /*  48 */
  --space-8: 4rem;     /*  64 */
  --space-12: 6rem;    /*  96 */
  --space-16: 8rem;    /* 128 */
  --space-24: 12rem;   /* 192 */

  /* Layout */
  --gutter: var(--space-2);
  --col-gap: var(--space-2);
  --max: 1280px;

  /* Radii: tight on data, never pill-shaped */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;

  /* Shadows: only where something floats */
  --shadow-float: 0 1px 0 rgb(11 27 77 / 0.06), 0 12px 32px -8px rgb(7 18 56 / 0.28);
  --shadow-panel: 0 24px 64px -24px rgb(0 0 0 / 0.55);

  /* Focus */
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--blue-600);
  --focus-ring-on-navy: 0 0 0 2px var(--navy-900), 0 0 0 4px var(--blue-300);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 140ms;
  --dur-med: 420ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--space-4);
    --col-gap: var(--space-3);
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: var(--space-6);
  }
}