/* ==========================================================================
   Brand design tokens  (v2.0, October 2026: Palette B "Indigo -> violet", Logo 1 "Glow i")
   --------------------------------------------------------------------------
   The product name is deliberately NOT used anywhere in this file.
   Token prefix --pf- is a neutral namespace; keep it even if the name changes.

   Light mode is the default. Dark mode applies when the OS asks for it,
   unless the page sets data-theme="light"; or when data-theme="dark" is set.

   Clinical status colours (ok / warn / danger) are SEMANTIC and reserved:
     danger = call 999 / emergency      warn = duty doctor / same day
     ok     = routine / safe to book
   Never use them for decoration, branding, or "live"/"new" indicators.

   Gradient rule: --pf-gradient is for the logo, hero moments, large type (24px+)
   and illustration only. Never behind small text, never on buttons, and never on
   or near clinical status elements. Buttons and links use solid --pf-brand.

   Contrast ratios for every pairing are checked by tools/contrast.mjs
   (results in guidelines.md / guidelines.html).
   ========================================================================== */

/* Atkinson Hyperlegible Next + Mono for UI and body text; Outfit for display and
   marketing headings (the logotype's typeface). All SIL OFL, Google Fonts.
   In Next.js prefer next/font/google instead of this @import (see app-integration.md). */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:wght@400;600&family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Outfit:wght@500;600;700;800&display=swap");

:root {
  color-scheme: light;

  /* ---- Brand (Palette B: indigo -> violet) --------------------------- */
  --pf-brand: #5b3df5;          /* Indigo 500 - primary buttons, links, selected states */
  --pf-brand-strong: #3a1fb5;   /* Indigo 800 - hover/pressed, text on brand-soft */
  --pf-brand-text: #4a2be0;     /* Indigo 600 - small brand-coloured text (eyebrows, labels) */
  --pf-brand-soft: #f1edff;     /* Indigo 50  - selected rows, info panels, caller lines */
  --pf-brand-2: #a33be8;        /* Violet     - second tone: illustration, charts, large type.
                                   Graphics 3:1 on white; not for small text. */
  --pf-accent: #e07bf7;         /* Orchid     - decorative only: highlights, illustration.
                                   Never a text colour in light mode. */
  --pf-on-brand: #ffffff;       /* text/icons on --pf-brand */
  --pf-on-accent: #14132b;

  /* Gradient: logo, hero moments, large type, illustration. Never behind small text. */
  --pf-gradient-from: #4f46e5;
  --pf-gradient-via: #7b3ff2;
  --pf-gradient-to: #c13fe0;
  --pf-gradient: linear-gradient(100deg, #4f46e5 0%, #7b3ff2 55%, #c13fe0 100%);
  --pf-on-gradient: #ffffff;    /* large text (24px+, or 19px bold) on --pf-gradient only */
  /* Pale wash for stages behind product cards and hero sections. Body text is fine on it. */
  --pf-wash-from: #f4f1ff;
  --pf-wash-to: #fbf4fe;
  --pf-gradient-soft:
    radial-gradient(55% 75% at 12% 25%, rgba(91, 61, 245, 0.16), transparent 70%),
    radial-gradient(55% 75% at 90% 80%, rgba(193, 63, 224, 0.16), transparent 70%),
    linear-gradient(180deg, #f4f1ff, #fbf4fe);

  /* ---- Neutrals ------------------------------------------------------- */
  --pf-bg: #f5f5f9;             /* page background */
  --pf-surface: #ffffff;        /* cards, inputs */
  --pf-surface-2: #eeedf5;      /* table headers, transcript lines, wells */
  --pf-text: #14132b;           /* Ink */
  --pf-text-muted: #55546b;     /* secondary text - AA on bg, surface and surface-2 */
  --pf-border: #dfdde9;         /* decorative dividers and card edges */
  --pf-border-strong: #737189;  /* form-field borders - 3:1 non-text contrast */
  --pf-focus: #5b3df5;          /* focus ring (used with a surface-coloured gap) */

  /* ---- Clinical status (reserved semantics) -------------------------- */
  --pf-ok: #007f3b;             /* routine */
  --pf-ok-bg: #e5f3ea;
  --pf-ok-text: #00692f;
  --pf-on-ok: #ffffff;

  --pf-warn: #ffb81c;           /* duty doctor / same day - border & fill, NOT text */
  --pf-warn-bg: #fff4d6;
  --pf-warn-text: #6b4500;      /* amber-family text that passes AA */
  --pf-warn-strong: #946200;    /* amber icons/outlines that must stand alone (3:1) */
  --pf-on-warn: #1c1b2e;

  --pf-danger: #d5281b;         /* 999 / emergency */
  --pf-danger-bg: #fce9e7;
  --pf-danger-text: #b3200f;
  --pf-on-danger: #ffffff;

  /* ---- Typography ----------------------------------------------------- */
  --pf-font-sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Display: website and marketing headings, hero type, slides. The app UI keeps
     Atkinson for every heading (clinical screens favour legibility over flair). */
  --pf-font-display: "Outfit", "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --pf-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pf-text-xs: 0.8125rem;   /* 13px - legal, timestamps (never clinical content) */
  --pf-text-sm: 0.875rem;    /* 14px - hints, metadata */
  --pf-text-base: 1rem;      /* 16px - body, inputs */
  --pf-text-md: 1.125rem;    /* 18px - questions to ask, emphasised body */
  --pf-text-lg: 1.375rem;    /* 22px - h2, banner instructions */
  --pf-text-xl: 1.75rem;     /* 28px - h1, suggested slot */
  --pf-text-2xl: 2.25rem;    /* 36px - marketing h2 */
  --pf-text-3xl: 3rem;       /* 48px - marketing hero */
  --pf-leading-tight: 1.2;
  --pf-leading: 1.5;
  --pf-weight-regular: 400;
  --pf-weight-medium: 500;
  --pf-weight-semibold: 600;
  --pf-weight-bold: 700;
  --pf-weight-heavy: 800;

  /* ---- Space (4px base) ---------------------------------------------- */
  --pf-space-1: 4px;
  --pf-space-2: 8px;
  --pf-space-3: 12px;
  --pf-space-4: 16px;
  --pf-space-5: 24px;
  --pf-space-6: 32px;
  --pf-space-7: 48px;
  --pf-space-8: 64px;

  /* ---- Shape & elevation --------------------------------------------- */
  --pf-radius-sm: 6px;       /* inputs, buttons, pills-as-tags */
  --pf-radius: 10px;         /* cards, banners */
  --pf-radius-lg: 16px;      /* dialogs, marketing panels */
  --pf-radius-xl: 28px;      /* website stages and feature tiles (Blend direction) */
  --pf-radius-pill: 999px;
  --pf-border-width: 1px;
  --pf-status-bar: 8px;      /* coloured left edge on result / status cards */
  --pf-shadow: 0 1px 2px rgba(20, 19, 43, 0.06), 0 2px 8px rgba(20, 19, 43, 0.06);
  --pf-shadow-lg: 0 4px 12px rgba(20, 19, 43, 0.08), 0 16px 40px rgba(20, 19, 43, 0.10);

  /* ---- Motion --------------------------------------------------------- */
  --pf-ease: cubic-bezier(0.2, 0, 0, 1);
  --pf-duration: 160ms;
}

/* ---- Dark mode ------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --pf-brand: #ae9bff;
    --pf-brand-strong: #d4c9ff;
    --pf-brand-text: #b9a9ff;
    --pf-brand-soft: #2a2266;
    --pf-brand-2: #d08cff;
    --pf-accent: #f0a0fa;
    --pf-on-brand: #0e0d1a;
    --pf-on-accent: #0e0d1a;

    --pf-gradient-from: #8f8bff;
    --pf-gradient-via: #b184ff;
    --pf-gradient-to: #eb8cf7;
    --pf-gradient: linear-gradient(100deg, #8f8bff 0%, #b184ff 55%, #eb8cf7 100%);
    --pf-on-gradient: #0e0d1a;
    --pf-wash-from: #19163a;
    --pf-wash-to: #21163a;
    --pf-gradient-soft:
      radial-gradient(55% 75% at 12% 25%, rgba(91, 61, 245, 0.16), transparent 70%),
      radial-gradient(55% 75% at 90% 80%, rgba(193, 63, 224, 0.16), transparent 70%),
      linear-gradient(180deg, #19163a, #21163a);

    --pf-bg: #0e0d1a;
    --pf-surface: #1a1930;
    --pf-surface-2: #252440;
    --pf-text: #f2f1f8;
    --pf-text-muted: #b7b5cc;
    --pf-border: #34334d;
    --pf-border-strong: #8a889f;
    --pf-focus: #c4b8ff;

    --pf-ok: #4cc47e;
    --pf-ok-bg: #0f2e1c;
    --pf-ok-text: #6fd59a;
    --pf-on-ok: #131320;
    --pf-warn: #ffc53d;
    --pf-warn-bg: #33270a;
    --pf-warn-text: #ffd66b;
    --pf-warn-strong: #ffc53d;
    --pf-on-warn: #131320;
    --pf-danger: #ff7a6b;
    --pf-danger-bg: #3a1512;
    --pf-danger-text: #ff9a8e;
    --pf-on-danger: #131320;

    --pf-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --pf-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.5);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --pf-brand: #ae9bff;
  --pf-brand-strong: #d4c9ff;
  --pf-brand-text: #b9a9ff;
  --pf-brand-soft: #2a2266;
  --pf-brand-2: #d08cff;
  --pf-accent: #f0a0fa;
  --pf-on-brand: #0e0d1a;
  --pf-on-accent: #0e0d1a;

  --pf-gradient-from: #8f8bff;
  --pf-gradient-via: #b184ff;
  --pf-gradient-to: #eb8cf7;
  --pf-gradient: linear-gradient(100deg, #8f8bff 0%, #b184ff 55%, #eb8cf7 100%);
  --pf-on-gradient: #0e0d1a;
  --pf-wash-from: #19163a;
  --pf-wash-to: #21163a;
  --pf-gradient-soft:
    radial-gradient(55% 75% at 12% 25%, rgba(91, 61, 245, 0.16), transparent 70%),
    radial-gradient(55% 75% at 90% 80%, rgba(193, 63, 224, 0.16), transparent 70%),
    linear-gradient(180deg, #19163a, #21163a);

  --pf-bg: #0e0d1a;
  --pf-surface: #1a1930;
  --pf-surface-2: #252440;
  --pf-text: #f2f1f8;
  --pf-text-muted: #b7b5cc;
  --pf-border: #34334d;
  --pf-border-strong: #8a889f;
  --pf-focus: #c4b8ff;

  --pf-ok: #4cc47e;
  --pf-ok-bg: #0f2e1c;
  --pf-ok-text: #6fd59a;
  --pf-on-ok: #131320;
  --pf-warn: #ffc53d;
  --pf-warn-bg: #33270a;
  --pf-warn-text: #ffd66b;
  --pf-warn-strong: #ffc53d;
  --pf-on-warn: #131320;
  --pf-danger: #ff7a6b;
  --pf-danger-bg: #3a1512;
  --pf-danger-text: #ff9a8e;
  --pf-on-danger: #131320;

  --pf-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --pf-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* Users who ask for less motion get none. */
@media (prefers-reduced-motion: reduce) {
  :root { --pf-duration: 0ms; }
}