/*
 * AppTrack design tokens
 * ----------------------
 * Every colour, font, size, weight, style, radius, spacing, shadow and
 * breakpoint used by the interface is defined here, so the look of the whole
 * app can be changed from this one file.
 *
 * Colour pairs meet WCAG 2.2 AA contrast: at least 4.5:1 for text and 3:1 for
 * borders, focus rings and other interface parts, in both light and dark themes.
 * Breakpoints (used in app.css media queries, which can't read variables):
 *   --bp-tablet: 48em (768px)    --bp-desktop: 64em (1024px)
 */

:root {
  /* Fonts: each platform's own interface font, so nothing is downloaded. */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* Type scale (fluid between phone and desktop). */
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --font-size-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --font-size-xxl: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-style-emphasis: italic;

  --line-height-tight: 1.25;
  --line-height-base: 1.5;

  /* Spacing scale. */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Page gutter: 16px on phones, growing on larger screens. */
  --page-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --page-max-width: 80rem;
  --measure: 42rem;            /* comfortable reading width for forms and text */

  /* Shapes. */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Interaction. */
  --focus-width: 3px;
  --focus-offset: 2px;
  --target-min: 2.75rem;       /* 44px touch targets (WCAG minimum is 24px) */
  --transition-fast: 120ms ease-out;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08);
  --shadow-md: 0 2px 8px rgb(0 0 0 / 0.12);

  /* Colours – light theme. */
  --color-bg: #f5f7fa;
  --color-surface: #ffffff;
  --color-surface-muted: #eef1f5;
  --color-text: #1b2430;
  --color-text-muted: #4a5565;          /* 7.0:1 on white */
  --color-border: #c5ccd6;
  --color-border-strong: #6b7685;       /* 4.6:1 on white: inputs */

  --color-primary: #1f4fd1;             /* 6.6:1 on white */
  --color-primary-hover: #183fa8;
  --color-primary-text: #ffffff;
  --color-link: #1f4fd1;
  --color-link-visited: #5b2fa3;

  --color-header-bg: #15233b;
  --color-header-text: #ffffff;
  --color-header-link-active: #ffd23f;

  --color-focus: #ffbf00;               /* focus ring, paired with dark outline */
  --color-focus-text: #0b0c0c;

  --color-success: #0b7a3e;
  --color-success-bg: #e6f4ec;
  --color-error: #b3261e;
  --color-error-bg: #fcebea;
  --color-warning: #8a5300;
  --color-warning-bg: #fff4e0;
  --color-info: #1f4fd1;
  --color-info-bg: #e8eefc;

  --color-danger: #b3261e;
  --color-danger-hover: #8f1d17;
  --color-danger-text: #ffffff;
}

/* Dark theme follows the device setting. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f141b;
    --color-surface: #18202b;
    --color-surface-muted: #212b38;
    --color-text: #e8edf3;
    --color-text-muted: #b3bdc9;
    --color-border: #3a4656;
    --color-border-strong: #8592a3;

    --color-primary: #7aa2ff;
    --color-primary-hover: #a3bfff;
    --color-primary-text: #0b1220;
    --color-link: #8fb0ff;
    --color-link-visited: #c5a8f5;

    --color-header-bg: #0a0f16;
    --color-header-text: #ffffff;

    --color-success: #5fd394;
    --color-success-bg: #0f2a1c;
    --color-error: #ff8a80;
    --color-error-bg: #33130f;
    --color-warning: #ffc266;
    --color-warning-bg: #2e2208;
    --color-info: #8fb0ff;
    --color-info-bg: #142040;

    --color-danger: #ff8a80;
    --color-danger-hover: #ffb3ab;
    --color-danger-text: #1a0503;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 2px 8px rgb(0 0 0 / 0.5);
  }
}

/*
 * Webash additions
 * ----------------
 * Everything above is the AppTrack token set, unchanged. The values below are
 * the extra ones a marketing site needs (bigger headline, section spacing, the
 * yellow accent on dark bands). They sit after the dark-theme block on purpose
 * so the dark overrides here win.
 */
:root {
  --font-size-display: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  --section-space: clamp(3rem, 2rem + 5vw, 6rem);
  --header-height: 3.75rem;             /* used to offset in-page links under the sticky header */

  --color-accent: #ffd23f;              /* 11.4:1 on the header navy */
  --color-accent-hover: #ffe07a;
  --color-accent-text: #0b0c0c;
  --color-header-text-muted: #c9d3e3;   /* 10.4:1 on the header navy */
  --color-header-border: #7f8fab;       /* 4.8:1 on the header navy */
}