/* App roles (PRD v1.4, Theming and colour): Userflow's own colour names, each pointing at a Flex semantic token
   from tokens.css. Components use these roles or Flex semantic tokens, never --flex-* primitives or raw colours
   (scripts/check-colors.mjs enforces this). Roles are declared on every [data-theme] element as well as :root,
   so a subtree with its own data-theme (play mode is always dark) resolves them against its own tokens. */
:root,[data-theme]{
  /* surfaces */
  --surface:var(--page-surface-primary);          /* top bar, left panel, detail panel, canvas cards */
  --surface-2:var(--shape-neutral-subtle);        /* hover, inset tracks, stat cards */
  --surface-3:var(--shape-neutral-soft);          /* tags, stronger inset */
  --sheet:var(--sheet-surface-primary);           /* menus, pickers, dialogs */
  --backdrop:var(--sheet-backdrop);               /* dialog backdrop */
  --line:var(--shape-neutral-soft);               /* panel borders and dividers (Flex shape-divider is too faint on white) */
  --canvas:var(--shape-neutral-subtle);           /* canvas and App Map background; keeps light screens distinct */
  --dot:var(--shape-neutral-default);             /* canvas grid */

  /* text */
  --ink:var(--text-primary);
  --ink-2:var(--text-secondary);
  --ink-3:var(--text-secondary);                  /* light: Flex text-tertiary is 2.8:1 on white; dark uses text-tertiary */
  --on-accent:var(--text-invert-static);          /* text on accent, danger and status fills */

  /* brand accent: selection, focus, happy path */
  --wire:var(--shape-brand-primary-static);       /* light: Blue400 is 3.0:1 on white; Blue500 clears 3:1 for rings and paths */
  --wire-tint:var(--shape-brand-primary-subtle);
  --accent-fill:var(--shape-brand-primary-static); /* primary buttons: Blue500 keeps white labels at AA */
  --accent-text:var(--shape-brand-primary-static); /* accent text on surfaces and tints */
  --wire-strong:var(--accent-text);

  /* canvas semantics (CV-05, CV-07, CV-13) */
  --c-happy:var(--wire);
  --c-alt:var(--shape-neutral-strong);
  --c-error:var(--shape-danger-strong);
  --c-back:var(--shape-neutral-default);
  /* PRD v1.24 TH-14: Light draws a section as white at --section-mix over the grey canvas with a firm border, so a section
     inside or over another stacks one step lighter and every edge shows; dark keeps the brand tint (below) */
  --section:var(--shape-neutral-static);
  --section-line:var(--shape-neutral-strong);
  --section-mix:55%;
  --guide-line:var(--shape-promo-strong);
  --start:var(--shape-success-strong);
  --decision:var(--shape-brand-secondary-strong);
  --note-yellow:var(--shape-warning-subtle);
  --note-pink:var(--shape-promo-subtle);
  --note-blue:var(--shape-brand-primary-subtle);
  --note-green:var(--shape-success-subtle);
  --note-ink:var(--text-primary);
  /* screen frame (PRD v1.10 CV-20): a fixed light grey hairline in both themes, like a device bezel around the
     Figma render; the one raw colour Den specified, kept here so components still use a role */
  --screen-border:#CCCCCC;

  /* status (LP-04, MP-06): strong fill for dots and bars, subtle fill + text for pills */
  --st-draft:var(--shape-neutral-default);     --st-draft-bg:var(--shape-neutral-subtle);   --st-draft-text:var(--text-secondary);
  --st-review:var(--shape-warning-strong);     --st-review-bg:var(--shape-warning-subtle);  --st-review-text:var(--text-primary);
  --st-approved:var(--shape-success-strong);   --st-approved-bg:var(--shape-success-subtle); --st-approved-text:var(--text-primary);
  --st-dep:var(--shape-danger-strong);         --st-dep-bg:var(--shape-danger-subtle);      --st-dep-text:var(--text-primary);
  /* light: Flex warning, success and danger text fall below 4.5:1, so pills keep the colour in the dot and fill and use body text; dark uses the coloured text */
  --st-none-text:var(--text-tertiary);

  /* feedback */
  --warn:var(--shape-warning-strong);             /* hotspot outlines, handles, badges */
  --on-warn:var(--text-primary-static);
  --warn-text:var(--text-primary);
  --danger:var(--shape-danger-strong);            /* error edges and icons */
  --danger-bg:var(--shape-danger-subtle);         /* save bar, error toast */
  --on-danger:var(--text-primary);
  --danger-text:var(--text-danger);

  /* release versions (PRD v1.6, RV-04, RV-08, RV-11) */
  --rel-bg:var(--shape-neutral-subtle);           /* release tag */
  --rel-text:var(--text-secondary);
  --rel-pend-bg:var(--shape-info-subtle);         /* pending tag, "viewing an older release" banner */
  --rel-pend-text:var(--text-primary);          /* light: Flex text-info is 4.47:1 on info-subtle; dark uses text-info */
  --rel-changed:var(--shape-warning-strong);      /* outline: changed since the release being viewed */

  /* brand mark */
  --avatar:var(--shape-brand-secondary-strong);
  --on-avatar:var(--text-primary-static);

  /* journey codes (PRD v1.20 JC-06): a dark card in both themes, like the annotations in the design files */
  --jc-card:var(--text-primary-static);
  --jc-card-text:var(--text-invert-static);
  --jc-card-label:var(--text-brand-primary);
  --jc-mark:var(--text-secondary);                /* dashed rectangle, line and dot */

  /* shadows are not Flex colour tokens; they are tuned per theme here */
  --shadow-sm:0 1px 2px rgb(17 24 39 / .06);
  --shadow:0 1px 2px rgb(17 24 39 / .06),0 12px 32px -10px rgb(17 24 39 / .22);
  --phone-shadow:0 1px 1px rgb(17 24 39 / .05),0 16px 40px -14px rgb(17 24 39 / .3);
  --note-shadow:0 1px 1px rgb(0 0 0 / .06),0 10px 18px -10px rgb(0 0 0 / .35);
}
/* dark: accent text and lines need the lighter Flex steps */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --accent-text:var(--text-brand-primary);
    --ink-3:var(--text-tertiary);
    --wire:var(--shape-brand-primary-strong);
    --st-review-text:var(--text-warning);
    --st-approved-text:var(--text-success);
    --st-dep-text:var(--text-danger);
    --warn-text:var(--text-warning);
    --on-danger:var(--text-danger);
    --c-error:var(--text-danger);                 /* Red400 is 2.8:1 on the dark canvas */
    --rel-pend-text:var(--text-info);
    --shadow-sm:0 1px 2px rgb(0 0 0 / .3);
    --shadow:0 1px 2px rgb(0 0 0 / .3),0 14px 34px -10px rgb(0 0 0 / .6);
    --phone-shadow:0 0 0 1px rgb(255 255 255 / .05),0 20px 44px -14px rgb(0 0 0 / .7);
    --note-shadow:0 1px 1px rgb(0 0 0 / .3),0 10px 18px -10px rgb(0 0 0 / .6);
    --section:var(--shape-overlay-subtle);
    --section-line:var(--shape-brand-primary-soft);
    --section-mix:100%;
  }
}
[data-theme="dark"]{
  --accent-text:var(--text-brand-primary);
  --ink-3:var(--text-tertiary);
  --wire:var(--shape-brand-primary-strong);
  --st-review-text:var(--text-warning);
  --st-approved-text:var(--text-success);
  --st-dep-text:var(--text-danger);
  --warn-text:var(--text-warning);
  --on-danger:var(--text-danger);
  --c-error:var(--text-danger);                 /* Red400 is 2.8:1 on the dark canvas */
  --rel-pend-text:var(--text-info);
  --shadow-sm:0 1px 2px rgb(0 0 0 / .3);
  --shadow:0 1px 2px rgb(0 0 0 / .3),0 14px 34px -10px rgb(0 0 0 / .6);
  --phone-shadow:0 0 0 1px rgb(255 255 255 / .05),0 20px 44px -14px rgb(0 0 0 / .7);
  --note-shadow:0 1px 1px rgb(0 0 0 / .3),0 10px 18px -10px rgb(0 0 0 / .6);
  --section:var(--shape-overlay-subtle);
  --section-line:var(--shape-brand-primary-soft);
  --section-mix:100%;
}