/* ROS Logistic — design tokens.

   The one file in the project that holds a colour, size, radius or spacing literal. Every
   value below is the DESIGN.md frontmatter value verbatim
   (_bmad-output/planning-artifacts/ux-designs/ux-ros_logistic-2026-09-02/DESIGN.md), and
   tests/common/test_tokens.py pins it against that file. Templates and app.css use var(--…)
   only; a literal anywhere else fails the suite (UX-DR2).

   Resolution is selected by viewport, never by role: the light values are the default on
   :root; the warehouse (dark) values re-declare the same semantic names for the staff surface
   below the `md` breakpoint, and the light hook re-applies light inside that, for the
   Proof-of-Delivery capture screen (Story 4.7). The Portal never enters the query.

   Only the two rules at the foot of this file spell those selectors out. Prose above them
   names them, never quotes them: tests/common/test_tokens.py slices this file at the first
   occurrence of each selector, so a comment that quotes one would stand in for the rule.

   Naming: --color-<role>-light / --color-<role>-dark hold the two literal resolutions;
   --color-<role> is the semantic token everything else reads. Typography is
   --text-<style>-{size,weight,line,tracking}; rounded --rounded-*; spacing --space-* plus the
   named sizes; component literals keep their frontmatter meaning in the name.

   Lato: self-hosted, latin subset, 400/700/900 and 900 italic (see vendor/LICENSES.md). The
   tokens ask for weight 800 on display and action styles; Google Fonts ships no 800, and CSS
   font matching resolves it upward to the vendored 900, which is the weight the mockups
   render. Keep 800 in the tokens - do not "correct" it and do not ship a synthetic bold. */

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("vendor/lato-400-latin.b7d6b48d8d12.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("vendor/lato-700-latin.017598645bcc.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("vendor/lato-900-latin.cf5ec3859b05.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("vendor/lato-900italic-latin.dbbbabcac580.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ── Colours, light resolution: Client Portal, Back office, the capture screen, the digest. */
  --color-ink-light: #1C1C1A;
  --color-ink-muted-light: #707070;
  --color-ink-inverse-light: #FFFFFF;
  --color-surface-base-light: #FFFFFF;
  --color-surface-sunken-light: #F7F7F8;
  --color-surface-selected-light: #FDF5F5;
  --color-border-light: #E2E2E4;
  --color-border-strong-light: #8A8A8E;
  --color-brand-light: #DD3333;
  --color-brand-strong-light: #8C1A16;
  --color-danger-light: #DD3333;
  --color-danger-strong-light: #8C1A16;
  --color-info-light: #1C4A80;
  --color-success-light: #1C6B3C;
  --color-warning-light: #8A5A10;
  --color-idle-light: #707070;
  --color-focus-ring-light: #1C4A80;
  --color-focus-ring-on-ink-light: #60A5FA;

  /* ── Colours, dark resolution: the warehouse (Almacén) below 768px, and nothing else. */
  --color-ink-dark: #F2F2F0;
  --color-ink-muted-dark: #9A9A96;
  --color-ink-inverse-dark: #0E0E0D;
  --color-surface-base-dark: #0E0E0D;
  --color-surface-sunken-dark: #151513;
  --color-surface-raised-dark: #1C1C1A;
  --color-surface-selected-dark: #2A1614;
  --color-border-dark: #2F2F2C;
  --color-border-strong-dark: #6E6E68;
  --color-brand-dark: #FF3A2D;
  --color-brand-strong-dark: #FF3A2D;
  --color-danger-dark: #FF3A2D;
  --color-danger-strong-dark: #FF3A2D;
  --color-info-dark: #60A5FA;
  --color-success-dark: #4ADE80;
  --color-warning-dark: #FBBF24;
  --color-idle-dark: #9A9A96;
  --color-focus-ring-dark: #60A5FA;

  /* ── Semantic roles. Light by default; the staff query below swaps them. */
  --color-ink: var(--color-ink-light);
  --color-ink-muted: var(--color-ink-muted-light);
  --color-ink-inverse: var(--color-ink-inverse-light);
  --color-surface-base: var(--color-surface-base-light);
  --color-surface-sunken: var(--color-surface-sunken-light);
  /* Light has no raised layer (base -> sunken); cards and tiles sit on sunken there. */
  --color-surface-raised: var(--color-surface-sunken-light);
  --color-surface-selected: var(--color-surface-selected-light);
  --color-border: var(--color-border-light);
  --color-border-strong: var(--color-border-strong-light);
  --color-brand: var(--color-brand-light);
  --color-brand-strong: var(--color-brand-strong-light);
  --color-danger: var(--color-danger-light);
  --color-danger-strong: var(--color-danger-strong-light);
  --color-info: var(--color-info-light);
  --color-success: var(--color-success-light);
  --color-warning: var(--color-warning-light);
  --color-idle: var(--color-idle-light);
  --color-focus-ring: var(--color-focus-ring-light);
  --color-focus-ring-on-ink: var(--color-focus-ring-on-ink-light);
  /* The on-ink rule applied to the wordmark: the ink app bar is a dark band inside a light
     surface, where #DD3333 reads at 3.7:1 and the logo's own red (the dark resolution's brand
     value) at 4.8:1. Nothing but the brand mark may use it. */
  --color-brand-on-ink: var(--color-brand-dark);
  /* Two fills whose light and dark resolutions are not the same role: form fields sit on
     base in light and on raised in dark; the outlined danger button is a base fill in light
     and transparent in dark (DESIGN.md components.form-field / button-danger). */
  --color-field-background: var(--color-surface-base-light);
  --color-button-danger-background: var(--color-surface-base-light);

  /* ── Typography. One family for prose, one monospace for identifiers, m³, money, time. */
  --font-sans: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --text-display-size: 28px;
  --text-display-weight: 800;
  --text-display-line: 1.2;
  --text-display-tracking: -0.02em;
  --text-title-size: 20px;
  --text-title-weight: 700;
  --text-title-line: 1.3;
  --text-title-tracking: -0.01em;
  --text-heading-size: 16px;
  --text-heading-weight: 700;
  --text-heading-line: 1.35;
  --text-body-size: 16px;
  --text-body-weight: 400;
  --text-body-line: 1.55;
  --text-body-sm-size: 14px;
  --text-body-sm-weight: 400;
  --text-body-sm-line: 1.5;
  --text-label-size: 11px;
  --text-label-weight: 700;
  --text-label-line: 1.4;
  --text-label-tracking: 0.05em;
  --text-action-size: 16px;
  --text-action-weight: 800;
  --text-action-line: 1.2;
  --text-action-operator-size: 18px;
  --text-action-operator-weight: 800;
  --text-action-operator-line: 1.2;
  --text-data-size: 14px;
  --text-data-weight: 400;
  --text-data-line: 1.45;
  --text-data-lg-size: 17px;
  --text-data-lg-weight: 700;
  --text-data-lg-line: 1.35;

  /* ── Shapes. */
  --rounded-sm: 4px;
  --rounded-md: 8px;
  --rounded-lg: 12px;
  --rounded-full: 9999px;
  --rounded: 8px;

  /* ── Spacing: the 4px scale and the named sizes. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --touch-min: 44px;
  --touch-critical: 56px;
  --touch-gap: 12px;
  --gutter-mobile: 16px;
  --gutter-desktop: 24px;
  --measure: 68ch;

  /* ── Component literals (DESIGN.md components.*). Border widths: the decorative hairline,
     the interactive boundary, and the emphasis width shared by invalid fields, the dialog
     frame and the preload marker. */
  --border-hairline: 1px;
  --border-interactive: 1.5px;
  --border-strong: 2px;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --tile-min-height: 96px;
  --signature-pad-min-height: 180px;
  --thumbnail-size: 72px;
  --digest-container-width: 600px;
  /* The only shadow and scrim in the product, for the consequence dialog (a later story). */
  --dialog-shadow: 0 8px 32px rgba(0,0,0,.28);
  --dialog-scrim: rgba(0,0,0,.45);
  --dialog-scrim-dark: rgba(0,0,0,.65);

  /* ── Breakpoints (DESIGN.md Layout & Spacing: sm < 768, md 768-1199, lg >= 1200). Media
     queries cannot read custom properties, so app.css repeats 767.98px in its @media lines;
     these exist for widths inside rules (the Portal content cap). */
  --breakpoint-md: 768px;
  --breakpoint-lg: 1200px;
}

/* The warehouse rendering: anyone on the staff chain below 768px, Administrators included.
   Same semantic names, dark values. The Portal has no data-surface="staff" and never enters. */
@media (max-width: 767.98px) {
  [data-surface="staff"] {
    --color-ink: var(--color-ink-dark);
    --color-ink-muted: var(--color-ink-muted-dark);
    --color-ink-inverse: var(--color-ink-inverse-dark);
    --color-surface-base: var(--color-surface-base-dark);
    --color-surface-sunken: var(--color-surface-sunken-dark);
    --color-surface-raised: var(--color-surface-raised-dark);
    --color-surface-selected: var(--color-surface-selected-dark);
    --color-border: var(--color-border-dark);
    --color-border-strong: var(--color-border-strong-dark);
    --color-brand: var(--color-brand-dark);
    --color-brand-strong: var(--color-brand-strong-dark);
    --color-danger: var(--color-danger-dark);
    --color-danger-strong: var(--color-danger-strong-dark);
    --color-info: var(--color-info-dark);
    --color-success: var(--color-success-dark);
    --color-warning: var(--color-warning-dark);
    --color-idle: var(--color-idle-dark);
    --color-focus-ring: var(--color-focus-ring-dark);
    --color-field-background: var(--color-surface-raised-dark);
    --color-button-danger-background: transparent;
  }
}

/* The light exception inside the warehouse: the Proof-of-Delivery capture screen (Story 4.7)
   sets data-theme="light" and gets the light resolution back without a token change. Declared
   after the query so it wins on the same element; on a descendant it wins by inheritance. */
[data-theme="light"] {
  --color-ink: var(--color-ink-light);
  --color-ink-muted: var(--color-ink-muted-light);
  --color-ink-inverse: var(--color-ink-inverse-light);
  --color-surface-base: var(--color-surface-base-light);
  --color-surface-sunken: var(--color-surface-sunken-light);
  --color-surface-raised: var(--color-surface-sunken-light);
  --color-surface-selected: var(--color-surface-selected-light);
  --color-border: var(--color-border-light);
  --color-border-strong: var(--color-border-strong-light);
  --color-brand: var(--color-brand-light);
  --color-brand-strong: var(--color-brand-strong-light);
  --color-danger: var(--color-danger-light);
  --color-danger-strong: var(--color-danger-strong-light);
  --color-info: var(--color-info-light);
  --color-success: var(--color-success-light);
  --color-warning: var(--color-warning-light);
  --color-idle: var(--color-idle-light);
  --color-focus-ring: var(--color-focus-ring-light);
  --color-field-background: var(--color-surface-base-light);
  --color-button-danger-background: var(--color-surface-base-light);
}