/* Sett colour tokens — light is the default, dark via prefers-color-scheme.
   Contrast ratios for every sanctioned pair are documented in guidelines/tokens.md.
   Brand red #e11605 is a NON-TEXT accent only: logo, identity rules, charts.
   It is never the interactive colour and never the error colour. */

:root {
  /* base palette */
  --ink-900: #1a1d1f;
  --ink-700: #3f464c;
  --ink-600: #4b5563;
  --grey-300: #d7dbdf;
  --grey-200: #e5e8ea;
  --grey-100: #f0f2f3;
  --grey-50:  #f6f7f8;
  --blue-700: #1d4ed8;   /* interactive        — 6.7:1 on white */
  --blue-800: #1e40af;   /* interactive hover  — 8.7:1 on white */
  --red-brand: #e11605;  /* brand accent, non-text — 4.9:1 on white */
  --red-700: #b42318;    /* error/destructive  — 6.6:1 on white */
  --red-800: #8f1d14;    /* error hover        — 8.9:1 on white */
  --green-900: #14532d;
  --amber-900: #7c4a03;
  --focus-yellow: #ffdd00;

  /* semantic — surfaces & text */
  --color-bg: #ffffff;
  --color-surface: var(--grey-50);
  --color-zebra: var(--grey-100);
  --color-text: var(--ink-900);          /* 16.9:1 on bg */
  --color-text-muted: var(--ink-600);    /* 7.6:1 on bg, 7.0:1 on surface */
  --color-border: var(--grey-300);
  --color-border-strong: var(--ink-600); /* form control borders — 7.6:1 */

  /* semantic — interactive */
  --color-primary: var(--blue-700);
  --color-primary-hover: var(--blue-800);
  --color-primary-text: #ffffff;         /* 6.7:1 on primary */
  --color-link: var(--blue-700);
  --color-link-hover: var(--blue-800);
  --color-link-visited: #5925b3;

  /* semantic — brand accent (non-text) */
  --color-brand: var(--red-brand);

  /* semantic — feedback */
  --color-danger: var(--red-700);
  --color-danger-hover: var(--red-800);
  --color-danger-text: #ffffff;          /* 6.6:1 on danger */
  --color-success: var(--green-900);

  /* status tags: tinted bg + dark text + 1px text-coloured border.
     Meaning is never colour-alone — every tag carries a label. */
  --status-neutral-bg: var(--grey-100);   --status-neutral-text: var(--ink-700);   /* 8.0:1 */
  --status-positive-bg: #e7f6ec;          --status-positive-text: var(--green-900);/* 8.3:1 */
  --status-attention-bg: #fbf0d9;         --status-attention-text: var(--amber-900);/* 6.6:1 */
  --status-danger-bg: #fbeae8;            --status-danger-text: var(--red-800);    /* 7.9:1 */
  --status-info-bg: #e9effb;              --status-info-text: var(--blue-800);     /* 7.6:1 */

  /* categorical tints: a solid saturated band with white text, for grouping
     (the org chart's department bars, and any future "which group is this").
     Deliberately the inverse of a status tag — a deep band with white text,
     not a pale pill with dark text — so a department colour is never read as
     positive/attention/danger/info. No tint enters the red sector: brand red
     stays a non-text accent. Grouping is never colour-alone; the bar always
     names its department. */
  --tint-1-bg: #0e6e70;  --tint-1-text: #ffffff;  /* teal   — 6.0:1 */
  --tint-2-bg: #543cc4;  --tint-2-text: #ffffff;  /* indigo — 7.5:1 */
  --tint-3-bg: #862ba8;  --tint-3-text: #ffffff;  /* purple — 7.2:1 */
  --tint-4-bg: #a11a5e;  --tint-4-text: #ffffff;  /* berry  — 7.4:1 */
  --tint-5-bg: #556413;  --tint-5-text: #ffffff;  /* olive  — 6.5:1 */
  --tint-6-bg: #3a5265;  --tint-6-text: #ffffff;  /* steel  — 8.2:1 */

  /* banners */
  --banner-info-bg: #e9effb;    --banner-info-border: var(--blue-800);
  --banner-success-bg: #e7f6ec; --banner-success-border: var(--green-900);
  --banner-error-bg: #fbeae8;   --banner-error-border: var(--red-700);

  /* focus — GOV.UK pattern: yellow paired with ink, never yellow alone */
  --color-focus: var(--focus-yellow);
  --color-focus-text: var(--ink-900);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #16191d;
    --color-surface: #1f242a;
    --color-zebra: #1c2126;
    --color-text: #e7e9eb;              /* 14.6:1 on bg */
    --color-text-muted: #a3adb8;        /* 7.7:1 on bg */
    --color-border: #3a424a;
    --color-border-strong: #a3adb8;

    --color-primary: #8ab4f8;           /* light-on-dark primary */
    --color-primary-hover: #a5c4fa;
    --color-primary-text: #10131a;      /* 8.9:1 on primary */
    --color-link: #8ab4f8;              /* 8.4:1 on bg, 7.4:1 on surface */
    --color-link-hover: #a5c4fa;
    --color-link-visited: #c4a7f5;

    --color-danger: #f97066;            /* 6.3:1 as text on bg */
    --color-danger-hover: #fb8f87;
    --color-danger-text: #10131a;       /* 6.7:1 on danger */
    --color-success: #6fcf8e;

    --status-neutral-bg: #2a3138;  --status-neutral-text: #c8d0d7;
    --status-positive-bg: #17301f; --status-positive-text: #8fdcaa;
    --status-attention-bg: #33270f;--status-attention-text: #e8b566;
    --status-danger-bg: #38201d;   --status-danger-text: #fda29b;
    --status-info-bg: #1d2939;     --status-info-text: #a5c4fa;

    /* the six hues hold; the band deepens to the established dark-tint depth
       and the text lightens to the same hue. Every pair is >= 7.3:1. */
    --tint-1-bg: #12383a;          --tint-1-text: #7fd8d5;
    --tint-2-bg: #2a2354;          --tint-2-text: #bdb3f8;
    --tint-3-bg: #371f47;          --tint-3-text: #e3aaf2;
    --tint-4-bg: #3f1730;          --tint-4-text: #f2a1c6;
    --tint-5-bg: #2a300f;          --tint-5-text: #bdcf78;
    --tint-6-bg: #1f2b35;          --tint-6-text: #a6bccf;

    --banner-info-bg: #1d2939;    --banner-info-border: #a5c4fa;
    --banner-success-bg: #17301f; --banner-success-border: #8fdcaa;
    --banner-error-bg: #38201d;   --banner-error-border: #f97066;

    /* focus yellow measures 13.1:1 on dark bg */
  }
}

/* Sett type tokens. System stack: zero download, hinted everywhere,
   and maps 1:1 onto SwiftUI's system font on the Apple shell. */

:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* type scale — rem-based so 200% zoom and user font-size settings hold */
  --text-xs: 0.75rem;    /* 12px — badges, table meta. Never body copy. */
  --text-sm: 0.875rem;   /* 14px — dense tables, hints, secondary UI */
  --text-md: 1rem;       /* 16px — body, forms, default */
  --text-lg: 1.125rem;   /* 18px — lead text, card titles */
  --text-xl: 1.5rem;     /* 24px — section headings (h2) */
  --text-2xl: 2rem;      /* 32px — page titles (h1) */

  --leading-tight: 1.25;   /* headings */
  --leading-normal: 1.5;   /* body */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* numeric data (balances, day counts, dates in tables) is always
     tabular so columns of figures align while scanning */
  --numeric: tabular-nums;
}

/* Sett spacing, radii, borders, elevation, motion. */

:root {
  /* spacing — 4px base, rem so it scales with zoom */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* radii — quiet; pill reserved for tags */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-pill: 9999px;

  /* borders */
  --border-width: 1px;
  --border-width-strong: 2px;  /* form controls */
  --border-width-accent: 4px;  /* banner left edges, danger card */

  /* elevation — two levels only; internal tools don't float */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.16);  /* dialogs only */

  /* motion — functional, brief; honour prefers-reduced-motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* focus */
  --focus-width: 3px;

  /* minimum hit target (WCAG 2.2 target size + touch) */
  --target-min: 2.75rem;  /* 44px */
}

/* dark interfaces don't cast shadows — depth comes from borders + surface steps */
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-sm: none;
    --shadow-lg: none;
  }
}