/* ============================================================================
   Design tokens — dash.dev

   Copy of the canonical palette in `docs/site-css/tokens.css`, extended with
   the Figma design-system (`--ds-*`) set. The repo copy is the source of truth
   and the two are kept identical.

   This copy lives in the WORKING FOLDER only — never hand-copy it, or any
   other file, into `sites/<site>/test`. DWT owns staging and writes it at
   publish; a hand-written staging copy stops matching what the site serves.

   This file declares custom properties and nothing else. Linking it is a
   visual no-op until a rule calls `var(...)`, which is what makes it safe to
   adopt one page at a time. Link it BEFORE the page-scoped sheets.

   The `--ds-*` values come from the Figma variables (Website / dash.org,
   Typography page, node 694:5049). Where a `--ds-*` token repeats a value the
   brand palette already names, it is declared as a REFERENCE rather than a
   second literal — so the colour changes in one place and the two names cannot
   drift apart. Eleven of the 52 are references for that reason; they are
   marked below.
   ========================================================================== */

:root {
  /* --- Brand palette (canonical) ---------------------------------------- */
  --dash-blue: #008de4;
  --dash-blue-hover: #1492e5;
  --dash-blue-pressed: #0e75b5;
  --dash-blue-light: #6cbeee;
  --dash-navy: #1550a2;
  --dash-navy-deep: #031841;
  --dash-green: #8dc341;

  --ink: #191c1f;
  --ink-muted: #6e747a;
  --ink-soft: #787878;
  --ink-on-dark: #ffffff;

  --surface: #ffffff;
  --surface-subtle: #f7f9fa;
  --surface-alt: #f5f6f7;

  --border: #dddddd;
  --border-strong: #cdcdcd;

  --font-sans: "Inter", Helvetica, Arial, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 34px;
  --text-2xl: 40px;

  /* --- Figma design-system tokens ---------------------------------------- */

  /* Type families. Deliberately NOT aliased to --font-sans: Figma declares
     `"Inter", sans-serif` with no Helvetica/Arial step, so pointing these at
     --font-sans would change what renders on a machine without Inter. */
  --ds-font-heading: "Inter", sans-serif;
  --ds-font-text: "Inter", sans-serif;

  --ds-fw-regular: 400;
  --ds-fw-medium: 500;
  --ds-fw-semibold: 600;
  --ds-fw-bold: 700;
  --ds-fw-extrabold: 800;

  /* Headings */
  --ds-h1-size: 56px;  --ds-h1-lh: 64px;
  --ds-h2-size: 44px;  --ds-h2-lh: 52px;
  --ds-h3-size: 36px;  --ds-h3-lh: 42px;
  --ds-h4-size: 28px;  --ds-h4-lh: 34px;
  --ds-h5-size: 22px;  --ds-h5-lh: 28px;
  --ds-h6-size: var(--text-md);            /* ref → 17px */
  --ds-h6-lh: 22px;

  /* Text scale */
  --ds-xl-size: var(--text-lg);            /* ref → 20px */
  --ds-xl-lh: 26px;   --ds-xl-para: 10px;
  --ds-l-size: var(--text-md);             /* ref → 17px */
  --ds-l-lh: 24px;    --ds-l-para: 8px;
  --ds-m-size: 15px;  --ds-m-lh: 20px;     --ds-m-para: 8px;
  --ds-s-size: var(--text-sm);             /* ref → 13px */
  --ds-s-lh: 18px;    --ds-s-para: 6px;
  --ds-xs-size: 11px; --ds-xs-lh: 15px;    --ds-xs-para: 5px;  --ds-xs-ls: 0.5px;

  /* Text colours */
  --ds-text-primary: var(--ink);           /* ref → #191c1f */
  --ds-text-secondary: #40464d;            /* no canonical equivalent */
  --ds-text-tertiary: var(--ink-muted);    /* ref → #6e747a */

  /* Buttons */
  --ds-btn-weight: 600;
  --ds-btn-lg-size: 16px;  --ds-btn-lg-lh: 22px;
  --ds-btn-md-size: 13px;  --ds-btn-md-lh: 18px;
  --ds-btn-sm-size: 12px;  --ds-btn-sm-lh: 16px;
  --ds-btn-filled-blue-bg: var(--dash-blue);         /* ref → #008de4 */
  --ds-btn-filled-blue-content: var(--ink-on-dark);  /* ref → #ffffff */
  --ds-btn-filled-white-bg: var(--surface);          /* ref → #ffffff */
  --ds-btn-tinted-white-bg: #ffffff26;               /* white at 15% */
  --ds-btn-stroke-black: var(--ink);                 /* ref → #191c1f */
  --ds-btn-stroke-white: var(--ink-on-dark);         /* ref → #ffffff */
  --ds-btn-stroke-gray: #8f929440;

  /* Button sizing — Figma collection "Components - Sizing", group Button
     (Button > Size, page "|–– Button", node 3355:17438). Each name is the
     Figma variable path with a `ds-` prefix: `Button/Large/padding_vertical`
     → `--ds-button-large-padding-vertical`. These values are the Desktop
     mode; Tablet and Mobile override them in the media queries below.
     Read by `css/ds.css` (.ds-btn--lg / --md / --sm).

     The older --ds-btn-lg-size / -lh / --ds-btn-weight above predate this
     set and no longer match the component (16/22 vs 16/26 on Large). They
     stay because businesses.css and new-merchant-kit-v2.css read them;
     changing them would restyle those pages. */
  --ds-button-large-font-size: 16px;
  --ds-button-large-line-height: 26px;
  --ds-button-large-font-weight: var(--ds-fw-semibold);  /* ref → 600 */
  --ds-button-large-gap: 14px;
  --ds-button-large-padding-horizontal: 28px;
  --ds-button-large-padding-vertical: 15px;
  --ds-button-large-radius: var(--radius-pill);           /* ref → 999px (Figma Radius/full) */

  --ds-button-medium-font-size: 14px;
  --ds-button-medium-line-height: 22px;
  --ds-button-medium-font-weight: var(--ds-fw-semibold);  /* ref → 600 */
  --ds-button-medium-gap: 10px;
  --ds-button-medium-padding-horizontal: 22px;
  --ds-button-medium-padding-vertical: 12px;
  --ds-button-medium-radius: var(--radius-pill);          /* ref → 999px */

  --ds-button-small-font-size: 13px;
  --ds-button-small-line-height: 16px;
  --ds-button-small-font-weight: var(--ds-fw-semibold);   /* ref → 600 */
  --ds-button-small-gap: 8px;
  --ds-button-small-padding-horizontal: 16px;
  --ds-button-small-padding-vertical: 10px;
  --ds-button-small-radius: var(--radius-pill);           /* ref → 999px */

  /* Button styles — Figma collection "Components - Colors", group Button
     (Button > Styles, node 3355:17519). Figma names these
     `Button/Filled blue/filled-blue-bg`; the repeated style name is dropped
     here, so it reads `--ds-button-filled-blue-bg`. Three roles per style:
     -bg (fill), -content (label and icons), -stroke (1px inside border).
     A style with no -bg or -stroke has none in Figma either. */
  --ds-button-filled-blue-bg: var(--dash-blue);             /* ref → #008de4 */
  --ds-button-filled-blue-content: var(--ink-on-dark);      /* ref → #ffffff */

  --ds-button-filled-white-bg: var(--surface);              /* ref → #ffffff */
  --ds-button-filled-white-content: var(--ink);             /* ref → #191c1f */

  --ds-button-tinted-gray-bg: #a8abad26;                    /* gray at 15% */
  --ds-button-tinted-gray-content: var(--ink);              /* ref → #191c1f */

  --ds-button-tinted-white-bg: #ffffff26;                   /* white at 15% */
  --ds-button-tinted-white-content: var(--ink-on-dark);     /* ref → #ffffff */

  --ds-button-stroke-black-stroke: var(--ink);              /* ref → #191c1f */
  --ds-button-stroke-black-content: var(--ink);             /* ref → #191c1f */

  --ds-button-stroke-gray-stroke: #8f929440;                /* gray at 25% */
  --ds-button-stroke-gray-content: var(--ink);              /* ref → #191c1f */

  --ds-button-stroke-white-stroke: var(--ink-on-dark);      /* ref → #ffffff */
  --ds-button-stroke-white-content: var(--ink-on-dark);     /* ref → #ffffff */

  --ds-button-plain-black-content: var(--ink);              /* ref → #191c1f */
  --ds-button-plain-blue-content: var(--dash-blue);         /* ref → #008de4 */
}

/* --- Figma modes -----------------------------------------------------------
   Desktop ≥992px (the :root values above) · Tablet 768–991px · Mobile ≤767px.
   The boundaries are Bootstrap's md/lg, which the site's grid already breaks
   on, so a mode switch lands where the layout reflows.

   Only values that differ from Desktop are listed. Any variable can vary by
   mode in Figma: when one changes there, add it to its block here. */

/* Tablet: every Components - Sizing value currently equals Desktop, so there
   is no block yet. When one diverges, add:
   @media (max-width: 991px) { :root { ... } }  — above the Mobile block, so
   Mobile still wins below 768px. */

/* Mobile */
@media (max-width: 767px) {
  :root {
    --ds-button-large-padding-horizontal: 24px;
    --ds-button-large-padding-vertical: 12px;
    --ds-button-medium-padding-horizontal: 20px;
    --ds-button-medium-padding-vertical: 10px;
  }
}