/* Alma Finance — design tokens. Source of truth: design/Alma Finance v5.dc.html.
   Use these variables everywhere; never hard-code a colour, size or radius in a page. */

/* Brand font: Sharp Grotesk (width 20), from ALMA/BRANDING/01_Brand Identity/Identity Assets/Typefaces/Sharp_Grotesk.
   Served from public/fonts/ as woff2. Browsers only download the weights a page actually uses. */
@font-face { font-family: "Sharp Grotesk"; src: url("/fonts/SharpGrotesk-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Sharp Grotesk"; src: url("/fonts/SharpGrotesk-Book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sharp Grotesk"; src: url("/fonts/SharpGrotesk-BookItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Sharp Grotesk"; src: url("/fonts/SharpGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Sharp Grotesk"; src: url("/fonts/SharpGrotesk-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Sharp Grotesk"; src: url("/fonts/SharpGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---- surfaces ---- */
  --ink: #1f2324;            /* sidebar, tab bar, primary buttons, main text */
  --paper: #f4efe6;          /* page background, subtotal rows */
  --card: #faf6ec;           /* cards, popovers, inputs */
  --stone: #e8e3d7;          /* borders, tracks, neutral chips */
  --input-row: #eef2e8;      /* P&L rows you type into */
  --input-border: #c9d6bb;
  --net-row: #f1e9d8;        /* P&L net profit row */
  --warn-wash: #f7ecd6;      /* unassigned rows */
  --neutral-tint: #ece7dc;   /* neutral pct pill */
  --range-band: #dfe7d4;     /* selected days in the date picker */
  --ink-hover: #33393a;
  --sidebar: #1f2a1c;        /* deep green — left panel and phone tab bar (Baha, 5 Nov: keep it dark green) */

  /* ---- text ---- */
  --text: #1f2324;
  --text-muted: #4a4d4a;
  --text-faint: #8c8f88;
  --text-disabled: #b5b0a4;

  /* ---- brand ---- */
  --olive: #4b6043;
  --olive-deep: #3a4c34;
  --olive-light: #8fae7c;    /* active nav dot, FINANCE on dark */
  --gold: #e0b870;           /* badges and active dots on dark */

  /* ---- on dark (sidebar, tab bar, lead KPI card) ---- */
  --on-ink: #f4efe6;
  --on-ink-muted: #a3a69f;
  --on-ink-faint: #8c8f88;
  --on-ink-soft: #c9c4b8;
  --on-ink-hover: rgba(244, 239, 230, .06);
  --on-ink-active: rgba(244, 239, 230, .09);
  --on-ink-line: rgba(244, 239, 230, .1);

  /* ---- status: only for status against a target ---- */
  --ok: #3d6b3a;    --ok-bar: #4d8249;    --ok-tint: #dfe7d4;   --ok-border: #cfdcc2;   --ok-deep: #2f5a30;  --ok-label: #2f4a2c;
  --warn: #8a5f1c;  --warn-bar: #c49a52;  --warn-tint: #f3e3c4; --warn-border: #ead3a8; --warn-deep: #7a5216; --warn-label: #5e4114;
  --bad: #a5473a;   --bad-bar: #b5503f;   --bad-tint: #f2d8d2;  --bad-border: #e8c3ba;  --bad-deep: #93392d;  --bad-label: #6e2f26;

  /* ---- Alma Kitchen: recipe team avatars and sign-off (design/Alma Dish Costs.dc.html, 12 Nov) ---- */
  --av-bs: #1f2324; --av-bs-fg: #f4efe6;   /* Baha: light text */
  --av-mj: #9ab38a; --av-kp: #d9a77c; --av-as: #a9bcd6; --av-fg: #1f2324;   /* dark text on these three */
  --signed-bg: #dfe7d4; --signed-fg: #2f5a30;
  --unsigned-bg: #f3e6c8; --unsigned-fg: #5e4413;
  --font-sign: "Caveat", cursive;          /* ONLY for the signed name */

  /* ---- overlays ---- */
  --backdrop: rgba(31, 35, 36, .12);
  --backdrop-strong: rgba(31, 35, 36, .3);
  --shadow-pop: 0 30px 70px -20px rgba(31, 35, 36, .35);   /* popovers and sheets only */

  /* ---- type ---- */
  --font: "Sharp Grotesk", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --fs-kpi: 42px;   --fs-kpi-m: 26px;
  --fs-title: 30px; --fs-title-m: 22px;
  --fs-body: 14px;  --fs-label: 13px; --fs-small: 12px; --fs-tiny: 11px;
  --fs-section: 12px; --ls-section: .2em;

  /* ---- shape ---- */
  --r-pill: 999px;
  --r-card: 18px; --r-card-lg: 20px; --r-popover: 22px; --r-sheet: 28px;
  --r-input: 9px; --r-input-m: 12px; --r-code: 7px; --r-nav: 10px;
  --tap: 44px;
  --sidebar-w: 248px;

  /* ---- legacy names (older page code) mapped onto the tokens ---- */
  --surface: var(--card);
  --cream: var(--paper);
  --ivory: var(--paper);
  --ink-bg: var(--ink);
  --green: var(--olive);
  --green-dark: var(--ink);
  --green-soft: var(--ok-tint);
  --muted: var(--text-muted);
  --line: var(--stone);
  --line-strong: var(--stone);
  --amber: var(--warn); --amber-soft: var(--warn-tint);
  --red: var(--bad);    --red-soft: var(--bad-tint);
  --ok-soft: var(--ok-tint);
  --radius: var(--r-card);
  --shadow: none;
  --brand: var(--olive);
}