/*
  scanmydocz design tokens.

  Cooler half of the sibling hue split (decision 3 in APPROVALS.md).
  fastbillgen takes the warm side of the wheel, this file stays in the
  blue and teal family throughout, including the neutrals, which are
  cool slate rather than warm gray so the two products never blur
  together in a tab strip.

  Consumed later by the actual product UI. Switch themes by setting
  data-theme="light" or data-theme="dark" on a root element, or rely on
  the prefers-color-scheme fallback below when no attribute is set.
*/

:root {
  /* Color, light, default */
  --color-surface: #F6F8F8;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: #EDF1F1;
  --color-border: #D9E1E2;
  --color-border-strong: #B9C5C6;

  --color-text: #101718;
  --color-text-secondary: #55666A;
  --color-text-muted: #85999C;

  --color-accent: #146B79;
  --color-accent-strong: #0F5560;
  --color-accent-soft: #DCEEF0;
  --color-accent-on-accent: #FFFFFF;

  --color-success: #2E7D52;
  --color-warning: #96690A;
  --color-danger: #B23B3B;

  /* Type scale */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --font-size-xs: 0.75rem;   /* 12px, captions, table headers */
  --font-size-sm: 0.875rem;  /* 14px, secondary text */
  --font-size-base: 1rem;    /* 16px, body */
  --font-size-md: 1.125rem;  /* 18px, emphasized body */
  --font-size-lg: 1.375rem;  /* 22px, section headings */
  --font-size-xl: 1.75rem;   /* 28px, page headings */
  --font-size-2xl: 2.25rem;  /* 36px, hero numbers */
  --font-size-3xl: 3rem;     /* 48px, hero headings */

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Every number a user reads (totals, dates, currency, line items)
     renders with this on. Never bare digits in a table. */
  --numeric-variant: tabular-nums;

  /* Spacing scale, 4px base */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-24: 6rem;    /* 96px */

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Border weight */
  --border-width-hairline: 1px;
  --border-width-emphasis: 2px;
}

[data-theme="dark"] {
  --color-surface: #0E1416;
  --color-surface-raised: #141C1F;
  --color-surface-sunken: #0A0F11;
  --color-border: #24302F;
  --color-border-strong: #35464A;

  --color-text: #E8EEEF;
  --color-text-secondary: #9AACAF;
  --color-text-muted: #6B7C7F;

  --color-accent: #4FB8C7;
  --color-accent-strong: #7BCCD8;
  --color-accent-soft: #16333A;
  --color-accent-on-accent: #0A2126;

  --color-success: #4FAE79;
  --color-warning: #D2A23C;
  --color-danger: #E07575;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface: #0E1416;
    --color-surface-raised: #141C1F;
    --color-surface-sunken: #0A0F11;
    --color-border: #24302F;
    --color-border-strong: #35464A;

    --color-text: #E8EEEF;
    --color-text-secondary: #9AACAF;
    --color-text-muted: #6B7C7F;

    --color-accent: #4FB8C7;
    --color-accent-strong: #7BCCD8;
    --color-accent-soft: #16333A;
    --color-accent-on-accent: #0A2126;

    --color-success: #4FAE79;
    --color-warning: #D2A23C;
    --color-danger: #E07575;
  }
}

/* Utility for any element that displays a number: amounts, dates, counts. */
.tabular-figures {
  font-variant-numeric: var(--numeric-variant);
  font-feature-settings: "tnum" 1;
}