/*
 * The landing's design tokens: the only place with raw values.
 * Built on the CRM's own (`CRM rent/src/styles/tokens.css`): the same ink, the same Gulf teal, the same statuses,
 * plate and bars, so the mini CRM window on the page is the CRM itself. What the landing adds: a warm paper
 * instead of white, a warm accent (terracotta) for small marks, a display scale and wider spacing. One font family.
 */
:root {
  /* Paper and ink: two lights, two darks. */
  --paper: #FAF7F2;
  --paper-2: #F2ECE2;
  --line: #E6DED1;
  --ink: #1F2328;
  /* 6.4:1 on --paper: second lines, captions. */
  --ink-2: #5F5A53;
  /* 3.4:1: decoration only, never information. */
  --ink-3: #9A938A;

  /* Personality: teal acts, terracotta marks. */
  --accent: #0E7C86;
  --accent-strong: #0A646C;
  --accent-bg: #DDF2F3;
  --on-accent: #FFFFFF;
  /* A word underlined in a heading, a small label, a number that matters. Never a button. 4.6:1 on --paper. */
  --warm: #B9542C;
  --warm-bg: #F8E4D6;
  /* The copilot's helmet, from the CRM: only where the copilot itself appears. */
  --copilot: #FE4614;

  /* The CRM inside the window: white, like the product. */
  --app-bg: #FFFFFF;
  --app-subtle: #F3F7F7;
  --app-border: #E1E6E7;
  --app-text: #1F2328;
  --app-text-2: #5B6270;
  --app-text-3: #8B919C;

  /* The plate chip and the rental bars: the CRM's own. */
  --plate-bg: #FFFFFF;
  --plate-ink: #1F2328;
  --plate-ink-2: #5B6270;
  --plate-border: #1F2328;
  --status-booked: #3563D8;
  --status-booked-bg: #EAF0FC;
  --status-active: #1F8A4C;
  --status-active-bg: #E6F5EC;
  --status-active-ink: #17703D;
  --status-due: #B26A00;
  --status-due-bg: #FDF3E2;
  --status-overdue: #C8372D;
  --status-overdue-bg: #FCE6E4;
  --status-closed: #9097A1;
  --status-closed-bg: #F0F1F3;
  --status-service: #6E7580;
  --status-service-bg: #E8EAED;
  /*
   * The UAE vehicle licence (mulkiya) as the copilot's demo draws it: its own pale yellow, olive lines, red and green
   * words. A thing, like the plate: the same in the night.
   */
  --mk-bg: #F1E6AE;
  --mk-ink: #23211A;
  --mk-line: #8E8058;
  --mk-red: #B0282C;
  --mk-green: #3E9A45;
  --mk-seal: #A8924A;
  --mk-seal-2: #5E6B3C;

  /* Where a client wrote from: the badge on their circle, the same in the night. */
  --channel-whatsapp: #1A9E55;
  --channel-telegram: #2481CC;

  /* Type: one family, the CRM's (the owner, 2026-10-28); headings set apart by size, weight and tracking alone. */
  --font-text: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;

  /* Sizes in rem; line height falls as the size grows. */
  --size-meta: 0.75rem;   /* 12 */
  --lh-meta: 1.125rem;
  --size-small: 0.875rem; /* 14 */
  --lh-small: 1.375rem;
  --size-body: 1rem;      /* 16 */
  --lh-body: 1.625rem;
  --size-lead: 1.125rem;  /* 18 */
  --lh-lead: 1.75rem;
  --size-h3: 1.5rem;      /* 24 */
  --lh-h3: 2rem;
  --size-h2: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);  /* 24 → 34 */
  --lh-h2: 1.15;
  --size-h1: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);    /* 32 → 52 */
  --lh-h1: 1.05;
  --track-display: -0.03em;

  /* Spacing: every value divisible by 4. */
  --s-1: 0.25rem;  /* 4 */
  --s-2: 0.5rem;   /* 8 */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.25rem;  /* 20 */
  --s-6: 1.5rem;   /* 24 */
  --s-8: 2rem;     /* 32 */
  --s-10: 2.5rem;  /* 40 */
  --s-12: 3rem;    /* 48 */
  --s-16: 4rem;    /* 64 */
  --s-20: 5rem;    /* 80 */
  --s-24: 6rem;    /* 96 */
  --s-32: 8rem;    /* 128 */
  /* Between two sections of the page; a phone gets less. */
  --section-gap: clamp(3rem, 1.5rem + 5vw, 6rem);
  --page-w: 72rem;   /* 1152 */
  --text-w: 40rem;   /* a readable line */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* Shape: the CRM's three radii, plus one for the window. */
  --r-chip: 4px;
  --r-control: 8px;
  --r-float: 8px;
  /* Buttons inside the CRM window: the CRM's own 6px. */
  --r-app-control: 6px;
  --r-window: 12px;
  --shadow-float: 0 1px 2px rgb(31 35 40 / 0.06), 0 8px 24px rgb(31 35 40 / 0.1);
  /* The window lifted off the paper: the one deep shadow on the page. */
  --shadow-window: 0 1px 2px rgb(60 40 20 / 0.06), 0 24px 64px -16px rgb(60 40 20 / 0.22);

  /* Controls */
  --control-h: 2.75rem;     /* 44: a thumb */
  --control-h-sm: 2.25rem;  /* 36 */

  /* Motion: only in answer to an action or a scroll into view. */
  --duration: 150ms;
  --duration-reveal: 400ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Night, by the device: a warm dark, not black; the window keeps the CRM's night. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #191714;
    --paper-2: #221F1B;
    --line: #34302A;
    --ink: #EDE8E1;
    --ink-2: #B3ACA2;
    --ink-3: #7A736A;
    --accent: #3DBCC6;
    --accent-strong: #5FD0D9;
    --accent-bg: #163A40;
    --on-accent: #0B1215;
    --warm: #EE8A5E;
    --warm-bg: #3D2518;
    --app-bg: #151D22;
    --app-subtle: #1B252B;
    --app-border: #2A363D;
    --app-text: #E6EBEE;
    --app-text-2: #A3AEB6;
    --app-text-3: #6F7C86;
    --status-booked: #6E93F0;
    --status-booked-bg: #1B2A4A;
    --status-active: #4CC27A;
    --status-active-bg: #17352A;
    --status-active-ink: #7DD9A0;
    --status-due: #E0A33F;
    --status-due-bg: #3B2C12;
    --status-overdue: #F07A6E;
    --status-overdue-bg: #43211F;
    --status-closed: #929BA4;
    --status-closed-bg: #262D33;
    --status-service: #9AA4AE;
    --status-service-bg: #262D33;
    --shadow-window: 0 1px 2px rgb(0 0 0 / 0.3), 0 24px 64px -16px rgb(0 0 0 / 0.6);
  }
}