/*
 * BML theme: the ONE place to change how the system looks.
 *
 * Layer 1 of the design system (docs/features/design-system.md):
 *   1. Basics (this file): colours, type, spacing, corners, shadows, motion.
 *   2. Roles (this file, lower down): what each colour/size is FOR. Components only use roles.
 *   3. Parts: static/css/components.css, built only from roles.
 *   4. Rules: docs/features/design-system.md.
 *
 * Never write a colour, font or size straight into components.css or a template.
 */

@font-face {
  font-family: "Kefa III";
  src: url("../fonts/KefaIII.d00fc4d447dc.ttf") format("truetype");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== 1. BASICS ===== */

  /* Neutrals: cool greys with a slight green lean, so they sit with the logo green */
  --grey-0: #ffffff;
  --grey-25: #f9fafa;
  --grey-50: #f3f5f5;
  --grey-100: #e9eded;
  --grey-200: #dce2e3;
  --grey-400: #9aa5aa;        /* Dots and marks only: too light for words (2.5:1) */
  --grey-450: #646f76;        /* Faint words: 4.7:1 on the page, 5.1:1 on white */
  --grey-500: #5f6b72;        /* Grey words on any surface (5:1 on the page, 4.6:1 on controls) */
  --grey-700: #3a4750;
  --navy-900: #1c2733;        /* Brand dark navy: main text */
  --navy-700: #314655;        /* Logo navy: the BML wordmark */
  --slate-800: #2f4350;       /* Dark slate of the tenant posters: panels, the dark pill */

  /* Green: shades of the logo green (#67c6b7 = green-400) */
  --green-50: #eef9f7;
  --green-100: #d7f1ec;
  --green-400: #67c6b7;       /* The logo green */
  --green-500: #56b8a8;
  --green-600: #23806f;       /* Deep green: white text on it is readable */
  --green-700: #1b6a5c;
  --green-ink: #0b2a25;       /* Dark text on the logo green */

  /* Status hues */
  --amber-500: #c98a12;
  --amber-50: #fdf5e4;
  --amber-700: #8f5b0a;       /* Readable amber words (5.7:1) */
  --blue-500: #3a87ab;        /* Logo blue */
  --blue-50: #eaf3f7;
  --blue-100: #d6e8f1;        /* Soft tint (tenant-poster tile) */
  --blue-700: #23617f;        /* Readable text on the blue tint */
  --red-500: #c9364b;
  --red-50: #fcecee;

  /* The other logo colours and their soft tints (docs/business/brand.md) */
  --pink-500: #ec6f90;        /* Logo pink */
  --pink-50: #fde8ef;
  --pink-700: #a3365a;        /* Readable text on the pink tint */
  --purple-700: #312b70;      /* Logo purple */
  --purple-50: #e9e6f6;

  /* BML's printed adverts (the To Let adverts in Airtable Marketing, 2026; docs/business/brand.md) */
  --forest-900: #032c20;      /* The adverts' deep green band and contact strip */
  --gold-500: #b8963a;        /* The "TO LET" price tab and the thin rules */

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Red Hat Display", "Inter", system-ui, sans-serif;

  /* Type scale (size / line height). Six sizes only. */
  --text-xs: 0.75rem;      --leading-xs: 1rem;       /* 12: captions */
  --text-sm: 0.8125rem;    --leading-sm: 1.125rem;   /* 13: labels, meta */
  --text-md: 0.9375rem;    --leading-md: 1.375rem;   /* 15: body */
  --text-lg: 1.0625rem;    --leading-lg: 1.5rem;     /* 17: card titles */
  --text-xl: 1.375rem;     --leading-xl: 1.75rem;    /* 22: section titles, prices */
  --text-2xl: 1.625rem;    --leading-2xl: 2rem;      /* 26: page titles, the main price (32 read as a landing page) */

  /* Spacing: steps of 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;

  /* Corners: three sizes, plus round (pill) for buttons and switches */
  --radius-sm: 10px;       /* Inputs, small images, banners */
  --radius-md: 16px;       /* Cards, photos */
  --radius-lg: 24px;       /* Big photos, sheets */
  --radius-pill: 999px;

  /* Shadows: three levels */
  --shadow-1: 0 1px 2px rgba(16, 24, 32, 0.05);                                   /* Rarely: cards rest on a border instead */
  --shadow-2: 0 1px 2px rgba(16, 24, 32, 0.04), 0 6px 20px rgba(16, 24, 32, 0.07);  /* Hover, raised */
  --shadow-3: 0 2px 6px rgba(16, 24, 32, 0.06), 0 16px 48px rgba(16, 24, 32, 0.14); /* Floating: bars, sheets */

  --motion-fast: 140ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ===== 2. ROLES: what things are FOR. Components use only these. ===== */

  /* Surfaces */
  --bg-page: var(--grey-50);
  --bg-card: var(--grey-0);
  --bg-subtle: var(--grey-25);         /* Wells inside a card, table headers */
  --bg-control: var(--grey-100);       /* Switch track, secondary button */
  --bg-control-hover: var(--grey-200);
  --border: var(--grey-100);           /* Card edges, dividers */
  --border-strong: var(--grey-200);    /* Inputs */

  /* Text */
  --text-primary: var(--navy-900);
  --text-secondary: var(--grey-500);
  --text-tertiary: var(--grey-450);     /* Empty values, future steps: still 4.5:1 on every surface */

  /* Action: the logo green with dark ink text (Sam's pick, 20/10) */
  --action-bg: var(--green-400);
  --action-bg-hover: var(--green-500);
  --action-text: var(--green-ink);
  --action-link: var(--green-700);      /* Links and plain buttons: deeper green so text stays readable */
  --action-tint: var(--green-50);       /* Selected rows, soft highlights */
  --focus-ring: var(--green-100);
  --focus-border: var(--green-600);
  --brand: var(--green-400);            /* Small brand touches: progress, ticks */

  /* Glass: ONLY for things that float over content (top bar, labels on photos, action bars, sheets) */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: blur(20px) saturate(180%);
  --glass-edge: inset 0 0 0 0.5px rgba(16, 24, 32, 0.06);

  /* Status: dot colour + soft background */
  --status-neutral: var(--grey-400);
  --status-info: var(--blue-500);         --status-info-bg: var(--blue-50);
  --status-success: var(--green-600);     --status-success-bg: var(--green-50);
  --status-warning: var(--amber-500);     --status-warning-bg: var(--amber-50);
  --status-warning-text: var(--amber-700);  /* Amber words ("due soon"); the dot stays --status-warning */
  --status-danger: var(--red-500);        --status-danger-bg: var(--red-50);

  /* Brand colours by name, for logos and documents (PDFs read them from here: common/pdf.py) */
  --brand-navy: var(--navy-700);
  --brand-green: var(--green-400);
  --brand-blue: var(--blue-500);
  --brand-pink: var(--pink-500);
  --brand-purple: var(--purple-700);

  /* The assistant's spark (assistant/static/assistant/mark.svg): BML's four logo colours lifted brighter so they glow.
     Only for the spark itself and small accents around it (its glow, the send button). docs/features/design-system.md */
  --spark-green: #4fd9c0;
  --spark-blue: #3fa9e6;
  --spark-purple: #6a5ce0;
  --spark-pink: #ff7aa8;
  --spark-gradient: linear-gradient(135deg, var(--spark-green) 0%, var(--spark-blue) 38%, var(--spark-purple) 70%, var(--spark-pink) 100%);  /* taste-skill-ignore: send button only */

  /* Info tiles: grouped information in the four logo colours, as on the tenant posters.
     Soft tint behind, readable ink for ticks and labels. Use in order 1 to 4 */
  --tile-1-bg: var(--green-100);    --tile-1-ink: var(--green-700);    /* mint */
  --tile-2-bg: var(--pink-50);      --tile-2-ink: var(--pink-700);     /* pink */
  --tile-3-bg: var(--blue-100);     --tile-3-ink: var(--blue-700);     /* blue */
  --tile-4-bg: var(--purple-50);    --tile-4-ink: var(--purple-700);   /* lavender */

  /* Dark panel: big-number call-outs, the document-type pill, the rent band on brochures */
  --bg-inverse: var(--slate-800);
  --text-inverse: var(--grey-0);

  /* What goes out (brochures, To Let adverts, the WhatsApp image): BML's advert look, not the app's */
  --print-band: var(--forest-900);
  --print-accent: var(--gold-500);
  --print-ink: var(--navy-900);

  /* Kicker: a small tracked uppercase label above a title ("WINTER HOME GUIDE", "FLAT · N15") */
  --label-colour: var(--green-700);
  --label-size: var(--text-xs);
  --label-weight: 700;
  --label-tracking: 0.18em;

  /* Type roles */
  --font-body: var(--font-sans);
  --font-title: var(--font-display);      /* Page and section titles: Red Hat Display (Sam's pick, 20/10) */
  --title-weight: 700;
  --title-tracking: -0.02em;

  /* The arrow on select boxes: a drawn chevron in the secondary grey (#5f6b72), not a gradient */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%235f6b72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Layout: every screen uses the full width of the window, with only this side margin (screen rule 13) */
  --page-gutter: var(--space-8);
}
@media (max-width: 640px) {
  :root { --page-gutter: var(--space-4); }
}