/*
 * Freelancer's design tokens as CSS custom properties.
 *
 * GENERATED from packages/brand/src/tokens.ts. Do not hand edit: change the
 * TypeScript and re-run `npm -w @fieldops/brand run build:css`, or the console
 * and the field app drift apart.
 *
 * Structured for all three theme states. The bare :root carries the complete
 * light palette; the media query redefines only what changes and is guarded so
 * an explicit light choice beats a dark OS; the attribute selector lets a
 * toggle win in the other direction. Only tokens are defined here, so no
 * component can end up with a colour that exists in one theme and not the
 * other.
 */

:root {
  --fl-primary: #e60278;
  --fl-primary-hover: #860146;
  --fl-primary-foreground: #ffffff;
  --fl-primary-fill: #e60278;
  --fl-secondary-fill: #1772eb;
  --fl-secondary: #1772eb;
  --fl-secondary-hover: #589af0;
  --fl-brand-navy: #082e60;
  --fl-nav-bg: #12151b;
  --fl-nav-bg-app-bar: #232a35;
  --fl-background: #ffffff;
  --fl-background-raised: #fcfcfd;
  --fl-background-sunken: #eef0f4;
  --fl-foreground: #12151b;
  --fl-foreground-muted: #3d4a5d;
  --fl-foreground-inverse: #ffffff;
  --fl-border: #bcc5d3;
  --fl-border-neutral: #5c6f8c;
  --fl-border-strong: #3d4a5d;
  --fl-success: #058430;
  --fl-success-surface: #defee9;
  --fl-error: #eb3730;
  --fl-danger: #e02a28;
  --fl-warning: #e96800;
  --fl-info: #1772eb;
  --fl-project-status: #07bc44;
  --fl-preferred: #ff6700;
  --fl-focus-ring: #589af0;
  --fl-focus-ring-outer: #eaf2fd;
  --fl-shadow-sm: 0 0 4px 0 rgba(61, 74, 93, .08), 0 2px 4px 0 rgba(61, 74, 93, .12);
  --fl-shadow-md: 0 0 6px 0 rgba(18, 21, 27, .12), 0 4px 10px 0 rgba(18, 21, 27, .16);

  --fl-font-sans: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fl-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fl-radius-button: 4px;
  --fl-radius-card: 8px;
  --fl-radius-pill: 999px;

  --fl-nav-height: 50px;
  --fl-button-height: 38px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fl-primary: #ff4fa3;
    --fl-secondary: #589af0;
    --fl-nav-bg: #0d1015;
    --fl-nav-bg-app-bar: #1a1f27;
    --fl-background: #12151b;
    --fl-background-raised: #1a1f27;
    --fl-background-sunken: #0d1015;
    --fl-foreground: #eef0f4;
    --fl-foreground-muted: #9aa7b8;
    --fl-border: #2c3542;
    --fl-border-neutral: #3d4a5d;
    --fl-border-strong: #5c6f8c;
    --fl-success: #07bc44;
    --fl-success-surface: #0d2a18;
    --fl-error: #ff624d;
    --fl-danger: #ff624d;
    --fl-warning: #ffa32d;
    --fl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .5);
    --fl-shadow-md: 0 4px 14px 0 rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --fl-primary: #ff4fa3;
  --fl-secondary: #589af0;
  --fl-nav-bg: #0d1015;
  --fl-nav-bg-app-bar: #1a1f27;
  --fl-background: #12151b;
  --fl-background-raised: #1a1f27;
  --fl-background-sunken: #0d1015;
  --fl-foreground: #eef0f4;
  --fl-foreground-muted: #9aa7b8;
  --fl-border: #2c3542;
  --fl-border-neutral: #3d4a5d;
  --fl-border-strong: #5c6f8c;
  --fl-success: #07bc44;
  --fl-success-surface: #0d2a18;
  --fl-error: #ff624d;
  --fl-danger: #ff624d;
  --fl-warning: #ffa32d;
  --fl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .5);
  --fl-shadow-md: 0 4px 14px 0 rgba(0, 0, 0, .55);
}