/* Civlo Web — design tokens.
   The single source of colour, type and shape for the staff app. Nothing else in the
   project may hard-code a hex value.

   Two families of colour live here:

   1. Civlo's own brand (teal and amber). It marks the product: the install screen, the
      splash, the icons. It never dresses a council's content.
   2. The council's brand, which arrives from the API at join time (primaryHex, buttonHex)
      and is written onto :root as --council-* by scripts/theme.js. The values below are
      the fallback, and match Hartvale Borough Council in the native app so the page looks
      right before the first response lands.

   Greys, text and status colours are lifted from the native app's ThemeHex so the two
   products stay recognisably the same. Each contrast note is against the surface it is
   used on and meets WCAG 2.2 AA (1.4.3) for text, or 3:1 (1.4.11) for a border. */

:root {
  color-scheme: light;

  /* ---- Civlo product brand ---------------------------------------------- */
  --civlo-teal: #0c5f5b;          /* white text 6.4:1 */
  --civlo-teal-deep: #084644;     /* white text 9.5:1 */
  --civlo-amber: #f39c12;         /* decorative only, never behind text */

  /* ---- The council's brand (replaced at runtime) ------------------------- */
  --council-primary: #1a4838;       /* header band. white text 10:1 */
  --council-primary-dark: #12352a;
  --council-button: #2b6b4f;        /* primary buttons and links. white text 6.7:1 */
  --council-button-dark: #225a41;
  --council-deep: #0e261e;
  /* Button at 12% over white: the selected/tinted chip background. */
  --council-tint: color-mix(in srgb, var(--council-button) 12%, #ffffff);
  --council-tint-strong: color-mix(in srgb, var(--council-button) 18%, #ffffff);
  /* The council colour used as TEXT or an icon on a page surface. In light mode that is
     the button colour itself; in dark mode it is lightened, because a council's green or
     navy is chosen to carry white text and would be unreadable on a near-black card. */
  --council-accent-text: var(--council-button);

  /* ---- Text -------------------------------------------------------------- */
  --text: #1a1a1a;            /* 16.1:1 on white */
  --text-secondary: #666666;  /* 5.7:1 on white, 5.2:1 on --page */
  --text-tertiary: #6b6b6b;   /* 5.3:1 on white */
  --text-on-brand: #ffffff;
  --field-label: #475569;     /* 8.0:1 on white */

  /* ---- Surfaces and lines ------------------------------------------------ */
  --page: #f5f5f5;
  --surface: #ffffff;
  --surface-sunken: #f2f2f7;
  --border: #e0e0e0;          /* decorative dividers only — 1.3:1 */
  /* The plate a council's logo sits on. White in both appearances, because council
     artwork is drawn for white and a dark plate would eat it. */
  --logo-plate: #ffffff;
  --input-border: #86868b;    /* 3.0:1 on white and on --page (1.4.11) */

  /* ---- Status ------------------------------------------------------------ */
  --danger: #c2410c;          /* white text 5.2:1 */
  --danger-text: #9a3412;     /* 6.8:1 on white, 6.2:1 on --danger-tint */
  --danger-tint: #ffedd5;
  --error: #c8102e;
  --error-text: #991b1b;
  --error-tint: #fee2e2;
  --success: #047857;
  --success-text: #065f46;    /* 7.4:1 on white, 6.9:1 on --success-tint */
  --success-tint: #d1fae5;
  --warning-text: #92400e;
  --warning-tint: #fef3c7;
  --info: #1d4ed8;            /* white text 7.0:1 — the Update badge */
  --info-text: #1e40af;
  --info-tint: #dbeafe;
  --purple: #6d28d9;          /* white text 7.6:1 — the Reminder badge */
  --purple-text: #5b21b6;     /* 8.3:1 on --purple-tint */
  --purple-tint: #ede9fe;

  /* ---- Shape and elevation ---------------------------------------------- */
  --radius-card: 16px;
  --radius-control: 10px;
  --radius-chip: 6px;
  --radius-panel: 24px;
  --shadow-card: 0 2px 8px rgb(0 0 0 / 0.08);
  --shadow-raised: 0 6px 20px rgb(0 0 0 / 0.14);
  --shadow-bar: 0 -2px 8px rgb(0 0 0 / 0.08);

  /* ---- Type -------------------------------------------------------------- */
  /* System stack, as the native app uses the platform face. Sizes are rem so that
     everything scales when the browser's text size is turned up to 200%. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --step-caption: 0.75rem;     /* 12px */
  --step-footnote: 0.8125rem;  /* 13px */
  --step-subhead: 0.9375rem;   /* 15px */
  --step-body: 1rem;           /* 16px */
  --step-headline: 1.0625rem;  /* 17px */
  --step-heading: 1.25rem;     /* 20px — a panel's own heading, a step below a hero */
  --step-title: 1.375rem;      /* 22px */
  --step-hero: 1.5rem;         /* 24px */

  /* ---- Spacing and layout ------------------------------------------------ */
  --gutter: 16px;
  --gutter-wide: 20px;
  --tap: 44px;                 /* WCAG 2.2 AA target size (2.5.8 is 24px; we keep 44) */
  --measure: 34rem;            /* a comfortable line length on a big screen */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* The app is a work tool used in bright depots and dim offices alike. The native app
   follows the phone's appearance, so this does too. Dark values keep the same contrast
   promises as the light ones. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --text: #f2f2f7;
    --text-secondary: #aeaeb2;   /* 8.0:1 on --surface */
    --text-tertiary: #9a9aa0;
    --field-label: #c7c7cc;

    --page: #000000;
    --surface: #1c1c1e;
    --surface-sunken: #2c2c2e;
    --border: #38383a;
    --input-border: #8e8e93;     /* 3.4:1 on --surface */

    --danger: #ea7444;
    --danger-text: #ffb894;      /* 7.1:1 on --surface */
    --danger-tint: #3a1a0a;
    --error-text: #ff9c9c;
    --error-tint: #3a1313;
    --success: #34b98a;
    --success-text: #8ce8c4;     /* 9.4:1 on --surface */
    --success-tint: #0d2c22;
    --warning-text: #f5c97a;
    --warning-tint: #33270a;
    --info-text: #9dbcff;
    --info-tint: #16224a;
    --purple-text: #c4b5fd;      /* 8.4:1 on --purple-tint */
    --purple-tint: #2a1b4d;

    --council-tint: color-mix(in srgb, var(--council-button) 26%, #1c1c1e);
    --council-tint-strong: color-mix(in srgb, var(--council-button) 36%, #1c1c1e);
    --council-accent-text: color-mix(in srgb, var(--council-button) 35%, #ffffff);

    --shadow-card: 0 2px 8px rgb(0 0 0 / 0.5);
    --shadow-raised: 0 6px 20px rgb(0 0 0 / 0.6);
    --shadow-bar: 0 -2px 8px rgb(0 0 0 / 0.5);
  }
}