/* =========================================================
   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 */
}

/* Arabic, for now: Readex Pro (OFL, Google Fonts), the temporary Arabic font until the studio picks its own.
   Only the Arabic letters are in the file, and the browser loads it only when a page has Arabic words;
   everything else stays Inter. */
@font-face {
  font-family: "CL Arabic";
  src: url("../fonts/readex-pro-arabic.woff") format("woff");
  font-weight: 160 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}

:root {
  /* ---- Color: the CRM uses the primary colors, with coral and
     yellow kept for a few marked moments. Pink is a soft accent with
     one meaning (2026-10-27): waiting on the client for a reply (Sent). Blue only
     marks the dashboard count of quotations awaiting a reply (user's choice). On the studio screens, Unpaid is
     coral and Overdue is black, the heaviest color (user's choice); none of these
     states reach the client's paper. Never a page or a large surface. */
  --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, Sent */
  --cl-blue: #ACC9E8;         /* accent: the dashboard count of quotations awaiting a reply (user's choice) */
  --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);
  /* Lines on paper (brand rule, 2026-10-27): black is for words and the logo only.
     Every line (boxes, rules, dividers, signature lines) is the light green tint, the
     same line as the tables in the app. The brand green is the strip at the page foot. One hairline weight for all. */
  --print-line: 1px solid var(--cl-green-tint);
  --print-line-section: 1px solid var(--cl-green);

  /* status tags */
  /* one color, one meaning, in the brand order: green, coral, yellow, pink */
  --tag-good-bg: var(--cl-green);       /* done: Paid, Accepted */
  --tag-alert-bg: var(--cl-black);      /* late, act now: Overdue, white text */
  --tag-mark-bg: var(--cl-yellow);      /* part way: Partial, To invoice */
  --tag-owed-bg: var(--cl-coral);       /* owed, not yet due: Unpaid (then black when overdue) */
  --tag-wait-bg: var(--cl-pink);        /* waiting on a reply: Sent */
  --tag-open-bg: var(--cl-white);       /* ours, not out yet, and anything else: Draft, white with a black line */
  --tag-closed-ink: var(--cl-ink-muted);/* ended: Rejected, Cancelled, Expired */

  /* ---- Type: Inter 4 variable. Inter Display (opsz 32) from 20px up, Inter (opsz 14) below. */
  --cl-font: "Inter CL", "CL Arabic", 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: 56mm;        /* room for the running header: the logo across the page, and air */
  --page-bottom: 22mm;     /* room for the footer */
  --page-head-y: 12mm;
  --page-foot-y: 10mm;
  --sign-air: 12.7mm;      /* the least air above the sign-off at the page foot: --s-5, 48px */
  --chip-y: 1.2mm;         /* inside a chip (Paid, Draft, a discount, You save): above and below */
  --chip-x: 2mm;           /* and left and right */
  --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 */
}