/* =========================================================
   Creative Lab CRM — design tokens
   The one source for every color, font and size in the app
   and in the printed documents. Values come from the approved
   Creative Lab Color System and Type System (the website).
   No other file names a color, a font or a font size.
   ========================================================= */

@font-face {
  font-family: "Inter CL";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;   /* never print or show a fallback font */
}

:root {
  /* ---- Color: the CRM uses the primary colors, with coral and
     yellow kept for a few marked moments. Blue and pink are not used. */
  --cl-black: #000000;        /* text, logo, lines, buttons, the total */
  --cl-white: #FFFFFF;        /* page */
  --cl-green: #AECAB9;        /* primary brand color: good news, navigation, the cover */
  --cl-green-tint: #E3EEE7;   /* the only tint: soft cards and panels */
  --cl-coral: #FF8772;        /* the one alert on a page: overdue, or the offer saving */
  --cl-yellow: #F7EB62;       /* the highlighter, always behind black text */
  --cl-pink: #EDD3E2;         /* accent: the mouse circle on green */
  --cl-ink: var(--cl-black);
  --cl-ink-muted: #4a4a4a;    /* secondary text, struck prices */
  --cl-ink-on-black: var(--cl-white);

  /* ---- Roles built on the colors above */
  --line: 1px solid var(--cl-black);
  --line-muted: 1px solid var(--cl-ink-muted);

  /* status tags */
  --tag-good-bg: var(--cl-green);       /* Paid, Accepted */
  --tag-alert-bg: var(--cl-coral);      /* Overdue */
  --tag-mark-bg: var(--cl-yellow);      /* Partial */
  --tag-open-bg: var(--cl-white);       /* Draft, Sent, Issued, Unpaid: white with a black line */
  --tag-closed-ink: var(--cl-ink-muted);/* Rejected, Cancelled, Expired */

  /* ---- Type: Inter 4 variable. Inter Display (opsz 32) from 20px up, Inter (opsz 14) below. */
  --cl-font: "Inter CL", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cl-opsz-text: 14;
  --cl-opsz-display: 32;

  --cl-regular: 400;
  --cl-medium: 500;
  --cl-semibold: 600;   /* never above 600 */

  /* screen sizes: the website scale, at its smallest (fixed) end */
  --size-display: 3.5rem;          /* 56: dashboard figures */
  --size-headline: 2rem;           /* 32 */
  --size-subhead: 1.25rem;         /* 20 */
  --size-small-heading: 1.0625rem; /* 17 */
  --size-body: 1.0625rem;          /* 17 */
  --size-ui: 1rem;                 /* 16: buttons, menus, tables, fields */
  --size-label: 0.875rem;          /* 14 */

  /* print sizes (A4), the same roles fixed for paper */
  --print-cover: 56px;
  --print-headline: 32px;
  --print-subhead: 20px;
  --print-body: 14px;
  --print-ui: 14px;
  --print-label: 11px;

  /* print families: in a browser all four are the one variable Inter CL
     (weight and opsz pick the cut); in a PDF each is its own static file (below) */
  --print-font-text: var(--cl-font);
  --print-font-text-medium: var(--cl-font);
  --print-font-display: var(--cl-font);
  --print-font-display-medium: var(--cl-font);

  /* A4 page */
  --page-w: 210mm;
  --page-h: 297mm;
  --cover-h: 296mm;        /* a hair under the page, so the cover never spills onto a second sheet */
  --page-x: 16mm;          /* side margins */
  --page-top: 34mm;        /* room for the running header */
  --page-bottom: 22mm;     /* room for the footer */
  --page-head-y: 12mm;
  --page-foot-y: 10mm;
  --box-pad: 5mm;          /* inside every box on paper, so all text inside boxes starts on one line */

  /* tracking: the bigger the type, the tighter */
  --track-cover: -0.018em;
  --track-headline: -0.012em;
  --track-subhead: -0.01em;
  --track-body: 0.005em;
  --track-label: 0.01em;

  /* leading */
  --lead-tight: 1.05;
  --lead-subhead: 1.25;
  --lead-ui: 1.2;
  --lead-body: 1.5;
  --lead-label: 1.3;

  /* ---- Space: the website scale */
  --s-0: 0.25rem;  /* 4 */
  --s-1: 0.5rem;   /* 8 */
  --s-2: 1rem;     /* 16 */
  --s-3: 1.5rem;   /* 24 */
  --s-4: 2rem;     /* 32 */
  --s-5: 3rem;     /* 48 */
  --s-6: 4rem;     /* 64 */

  /* ---- Shape: square corners everywhere, circles are round */
  --radius: 0;
  --radius-circle: 50%;
  --control-h: 3rem;   /* 48: buttons and fields */
  --sidebar-w: 15rem;
}

/* PDF (mPDF): the same roles mapped to Inter's static files, which are
   embedded from crm/fonts. mPDF knows only normal and bold, so each
   weight is its own family: text 400/600, text 500, display 400/600, display 500. */
.pdf {
  --print-font-text: intercl;
  --print-font-text-medium: interclmedium;
  --print-font-display: interdisplay;
  --print-font-display-medium: interdisplaymedium;
  --cl-semibold: bold;   /* mPDF picks the "B" file (SemiBold) only for bold */
}