/* KRAG design tokens: the single place for colour, type, spacing, radius and shadow values.
   Light is the default; dark follows the system, or a forced theme via <html data-theme="light|dark">.
   Warm off-white canvas, white cards, soft shadows, generous radius (chat-first layout). Accessibility floor from
   xx_front_end/REPORT.md is kept (dark accent and button text >= 4.5:1, inputs at 16px). */

:root {
  /* Colour: surfaces and text */
  --bg: #f7f4ee;          /* warm off-white canvas */
  --panel: #fff;          /* cards, composer, side panel */
  --side: #f4f0e8;        /* sidebar */
  --ink: #222b56;
  --muted: #646b89;
  --line: #e4e6eb;
  --chip: #f2eee6;
  --q: #ebe5d9;           /* user message bubble */
  --ok-tint: #e4f2f2;     /* soft backgrounds for delta pills (text stays --ink) */
  --bad-tint: #f7ebed;
  --warn-tint: #fbf3d6;

  /* Colour: brand and state */
  --accent: #0b4683;
  /* Print branding for exported PDFs: fixed light-paper colours, read whatever the screen theme. A tenant brand overrides these. */
  --print-brand: #0b4683;
  --print-ink: #222b56;
  --print-muted: #5b6380;
  --print-name: "KRAG Governance";
  --accent-bg: #e2e9f0;   /* soft accent behind chips and highlighted rows */
  --info: #0b4683;
  --info-tint: #e9eef4;
  --ai: #6d3fc0;
  --ai-tint: #efe9fa;
  --on-accent: #fff;      /* text on an accent-filled button (white on #0b4683 = 9.6:1) */
  --hit: #e8590c;
  --ok: #157877;
  --warn: #8f630b;
  --bad: #b3394f;
  --danger-mark: #bf2626; /* document watermark red */

  /* Colour: graph (Cytoscape reads these through KC.token() in krag-components.js) */
  --graph-ink: #222b56;
  --graph-line: #b9bfc8;
  --graph-muted: #646b89;
  --qr-bg: #fff;          /* QR codes stay dark-on-white in both themes so phones can scan them */
  --graph-bg: #fff;       /* graphs sit on white cards */
  --graph-hit: #ff8a3d;

  /* Graph nodes: one fill colour, one shape and one base size (px) per class. Light here, dark in the two dark blocks.
     Shapes are Cytoscape names. Final size = base + links x --graph-size-step (links capped at --graph-size-cap). */
  --graph-node-body: #2457c5;
  --graph-node-department: #1f8fb3;
  --graph-node-authority: #7b3fc4;
  --graph-node-threshold: #a3479a;
  --graph-node-metric: #8a6d3b;
  --graph-node-document: #5d6878;
  --graph-node-policy: #6b5b95;
  --graph-node-documentversion: #3d8b8b;
  --graph-node-meeting: #2f8f4e;
  --graph-node-matter: #c27c0e;
  --graph-node-recommendation: #d1495b;
  --graph-node-decision: #b3261e;
  --graph-node-action: #e8590c;
  --graph-node-party: #4a6fa5;
  --graph-node-position: #2b8a3e;
  --graph-node-role: #2b8a3e;
  --graph-node-issue: #0b7285;
  --graph-node-finding: #5c7f00;
  --graph-node-regulation: #a61e4d;
  --graph-node-risk: #6f4e37;
  --graph-node-strategy: #8f7a00;
  --graph-node-other: #888888;
  --graph-shape-body: round-rectangle;
  --graph-shape-department: cut-rectangle;
  --graph-shape-authority: diamond;
  --graph-shape-threshold: diamond;
  --graph-shape-metric: diamond;
  --graph-shape-document: rectangle;
  --graph-shape-policy: rectangle;
  --graph-shape-documentversion: rectangle;
  --graph-shape-meeting: hexagon;
  --graph-shape-matter: ellipse;
  --graph-shape-recommendation: triangle;
  --graph-shape-decision: star;
  --graph-shape-action: pentagon;
  --graph-shape-party: round-rectangle;
  --graph-shape-position: tag;
  --graph-shape-role: tag;
  --graph-shape-issue: octagon;
  --graph-shape-finding: rhomboid;
  --graph-shape-regulation: barrel;
  --graph-shape-risk: heptagon;
  --graph-shape-strategy: cut-rectangle;
  --graph-shape-other: ellipse;
  --graph-size-body: 18;
  --graph-size-department: 18;
  --graph-size-authority: 18;
  --graph-size-threshold: 18;
  --graph-size-metric: 18;
  --graph-size-document: 18;
  --graph-size-policy: 18;
  --graph-size-documentversion: 18;
  --graph-size-meeting: 18;
  --graph-size-matter: 18;
  --graph-size-recommendation: 18;
  --graph-size-decision: 18;
  --graph-size-action: 18;
  --graph-size-party: 18;
  --graph-size-issue: 18;
  --graph-size-finding: 18;
  --graph-size-regulation: 18;
  --graph-size-risk: 18;
  --graph-size-strategy: 18;
  --graph-size-other: 18;
  --graph-size-step: 3;            /* px added per link */
  --graph-size-cap: 9;             /* links counted at most */

  /* Graph edges, labels and states (unitless numbers are px or a ratio) */
  --graph-edge-width: 1.2;
  --graph-edge-width-hit: 2.5;
  --graph-edge-proposed-dash: solid;  /* Cytoscape line-style for an AI-found link a person has not looked at: solid like any other link; dashed or dotted only if a subtle marker is needed */
  --graph-edge-standard-dash: dotted;  /* a reporting line drawn from the standard, not a link the company confirmed */
  --graph-arrow-scale: .7;
  --graph-label-max: 34;           /* characters before a node label is cut with an ellipsis */
  --graph-label-width: 120;        /* px before a node label wraps */
  --graph-font-node: 10;
  --graph-font-edge: 8;
  /* Graph states (KC-GRAPH-STATE-NEAR, -HIT, -DIM, -SELECTED) are a documented exception to the rule
     that states are not ids: Cytoscape draws on a canvas, so an id is the only way to name a state and
     preview it on the design page. They have no CSS rule; their look comes from the --graph-* tokens here. */
  --graph-dim-opacity: .15;
  --graph-hit-border: 3;           /* border width of a highlighted or selected node */
  --graph-label-bg-opacity: .85;   /* node label backing, so text stays readable over lines */
  --graph-edge-label-bg-opacity: .9;
  --graph-label-pad: 2;
  --graph-edge-label-pad: 1;
  --graph-label-offset: 5;         /* px between a node and its label */
  --graph-group-pad: 18;           /* px of room inside a cluster box around its members */
  --graph-group-opacity: .07;      /* cluster box fill */
  --graph-group-font: 11;
  --graph-read-font: 11;           /* smallest label size (px on screen) the first view of a graph accepts; a wider graph starts at this zoom and pans */
  --graph-zoom-step: 1.2;          /* factor of one press of + or - */
  --graph-wheel: .18;              /* mouse wheel sensitivity: low = gradual */
  --graph-zoom-min: .15;
  --graph-zoom-min-zoned: .04;     /* the zoned company map: lowest zoom, so the whole map fits a small panel */
  --graph-zoom-max: 3;
  --graph-min-font: 7;             /* labels smaller than this on screen are not drawn */
  /* Zoned overview (T-289): faint backdrop per domain zone, drawn under the graph; a zone label sits at its top corner */
  --graph-lod-small: 300;          /* up to this many nodes: every label, edges drawn while panning */
  --graph-lod-nodes: 1500;         /* above this many nodes: Risk, Strategy and Matters fold by default and labels show for hubs only */
  --graph-hub-share: .05;          /* share of nodes, by number of links, that keep a label at any zoom */
  --graph-hub-boost: 4;            /* a hub label grows at most this many times when zoomed out */
  --graph-default-nodes: 2200;     /* the explorer opens unfolded up to about this many records; larger classes stay as counts to open */
  --graph-default-class-cap: 700;  /* a class with more records than this stays a count in the first view */
  --graph-node-gap: 14;            /* model px kept free between two nodes after the layout */
  --graph-link-length: 230;        /* model px of a link in the single layout */
  --graph-repulsion: 40000;        /* how hard records push each other apart in the layout */
  --graph-iso-step: 40;            /* model px between records that have no link (one blob per class) */
  --graph-core-n: 12;              /* the first view centres on this many best linked records */
  --graph-label-read: 9;           /* px on screen below which a record label is not drawn */
  --graph-undo-max: 30;            /* steps kept for undo and redo of view changes */
  --graph-agg-width-min: 1;      /* aggregated link (to a count node): thinnest line */
  --graph-agg-width-max: 5;        /* and thickest line, at --graph-agg-count-max links */
  --graph-agg-count-max: 100;
  --graph-agg-opacity: .14;
  --graph-agg-label-min: 8;        /* an aggregated link of at least this many shows its count at a readable zoom */
  --graph-drag-cap: 200;           /* most neighbours that follow a dragged node */
  --graph-fold-border: 2.5;        /* border width of a folded group */
  --graph-layout-budget: 3000;     /* ms; a zoned layout slower than this is cached on the server */

  /* Type */
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --font-ar: "Noto Kufi Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", "Arabic Typesetting", system-ui, sans-serif; /* system fonts only: the CSP allows no web fonts */
  --fs-base: 15px;
  --fs-chat: 16px;        /* conversation text */
  --fs-kpi: 26px;         /* KPI tile value */
  --fs-input: 16px;       /* 16px stops iOS zooming on focus */
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 16px;
  --fs-h2: 17px;
  --fs-h2-page: 18px;
  --fs-h3: 14px;
  --lh-base: 1.5;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing scale (px) */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 14px;
  --sp-8: 16px;
  --sp-9: 18px;
  --sp-10: 24px;
  --gutter: 16px;         /* page side gutter, also at phone width */

  /* Radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 24px;           /* composer, widget cards */
  --r-bubble: 20px;       /* user message bubble */
  --r-pill: 999px;

  /* Shadow: soft, low contrast (darker in the dark blocks) */
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(34, 43, 86, .06), 0 4px 14px rgba(34, 43, 86, .09);
  --shadow-composer: 0 2px 4px rgba(34, 43, 86, .08), 0 10px 30px rgba(34, 43, 86, .12);
  --shadow-dialog: 0 12px 40px rgba(60, 50, 30, .22);
  --shadow-menu: 0 12px 40px rgba(60, 50, 30, .22);

  /* Borders and focus */
  --bw: 1px;
  --bw-accent: 2px;
  --focus-ring: 2px solid var(--accent);

  /* Layout */
  --page-pad: clamp(var(--gutter), 3vw, 48px);  /* inner padding of a full-width page */
  --form-max: 640px;       /* a form on a full-width page keeps a usable field width */
  --prose-max: 75ch;       /* readable line length for running text on a full-width page */
  --doc-max: 1120px;       /* document kit pages (KC-DOC-PAGE): wider than the app page, for review tables */
  --doc-table-min: 720px;  /* document kit table: narrower screens scroll sideways instead of squeezing columns */
  --doc-lane-w: 240px;     /* document kit board lane (KC-DOC-LANE) */
  --doc-visual-min: 190px;
  --doc-detail-w: 340px;
  --doc-motion-fast: 180ms;
  --doc-motion-step: 1600ms;
  --doc-motion-ease: ease-in-out;
  --doc-motion-shift: 4px;
  --doc-detail-z: 30;
  --doc-index-w: 208px;
  --doc-index-top: 12px;
  --login-max: 340px;
  --dialog-max: 420px;
  --nav-w: 280px;          /* sidebar, extended */
  --nav-rail-w: 64px;      /* sidebar, collapsed rail */
  --chat-max: min(90%, 1480px);       /* centred conversation column: 90% of the chat pane, capped so lines stay readable */
  --panel-w: 560px;        /* graph side panel, docked */
  --ans-graph-h: clamp(420px, 56vh, 660px);    /* graph inside an answer card: tall on a desktop */
  --icon-btn: 36px;        /* round icon buttons */
  --send-size: 40px;       /* round send button */
  --avatar-size: 34px;
  --nav-drawer-max: 300px; /* menu, drawer: min(86%, this) */
  --pay-max: 420px;
  --z-drawer: 30;
  /* Regulations: one dot colour per category (the name is always shown too) */
  --reg-cat-consumer: #c27c0e;
  --reg-cat-aml: #b3261e;
  --reg-cat-capital: #2457c5;
  --reg-cat-credit: #8a6d3b;
  --reg-cat-cyber: #0b7285;
  --reg-cat-data: #7b3fc4;
  --reg-cat-governance: #a3479a;
  --reg-cat-licensing: #2f8f4e;
  --reg-cat-payments: #e8590c;
  --reg-cat-open-banking: #4a6fa5;
  --reg-cat-accounting: #5d6878;
  --reg-cat-outsourcing: #d1495b;
  --reg-cat-securities: #3d8b8b;
  --reg-cat-other: #646b89;
  --reg-mark: #ffe9a6;
  --reg-mark-now: #ffc24d;
  --reg-reader-w: 46rem;  /* article text measure */
  --reg-drawer-w: 26rem;  /* side drawer */
  --reg-toc-w: 15rem;
  --reg-facets-w: 15rem;
  --bp-mobile: 860px;     /* reference only: custom properties cannot be used in @media */
}

/* Arabic pages use the Arabic-capable stack and a slightly taller line */
:root[lang="ar"] { --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --lh-base: 1.65; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131413;
    --panel: #1b1c1a;
    --side: #101110;
    --ink: #edece6;
    --muted: #999eb5;
    --line: #232944;
    --chip: #242522;
    --q: #1c252e;
    --ok-tint: #142928;
    --bad-tint: #2d1a1d;
    --warn-tint: #29271d;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .3);
    --shadow-composer: 0 2px 4px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
    --shadow-dialog: 0 12px 40px rgba(0, 0, 0, .6);
    --shadow-menu: 0 12px 40px rgba(0, 0, 0, .6);
    --accent: #5aa4f1;
    --reg-cat-consumer: #e0a030;
    --reg-cat-aml: #f0746b;
    --reg-cat-capital: #6e9bf0;
    --reg-cat-credit: #c4a565;
    --reg-cat-cyber: #3fb6cc;
    --reg-cat-data: #b58af0;
    --reg-cat-governance: #d77ccf;
    --reg-cat-licensing: #5fc07e;
    --reg-cat-payments: #f08a4b;
    --reg-cat-open-banking: #8fb0e0;
    --reg-cat-accounting: #9aa4b5;
    --reg-cat-outsourcing: #ee7d8c;
    --reg-cat-securities: #5fbfbf;
    --reg-cat-other: #999eb5;
    --reg-mark: #5b4a12;
    --reg-mark-now: #8a6a14;
    --accent-bg: #1c252e;
    --info: #2b8aed;
    --info-tint: #112335;
    --ai: #b79cf0;
    --ai-tint: #231a38;
    --on-accent: #131413; /* dark text on the light-blue accent (7.4:1) */
    --hit: #ff8a3d;
    --ok: #1c9f9e;
    --warn: #f2d676;
    --bad: #ce6578;
    --graph-ink: #edece6;
    --graph-line: #4a5462;
    --graph-muted: #999eb5;
    --graph-bg: #1b1c1a; --graph-dim-opacity: .3;
    --graph-node-body: #6a9bff;
  --graph-node-department: #5cc3e6;
    --graph-node-authority: #b48aee;
    --graph-node-threshold: #d27cc8;
    --graph-node-metric: #c4a060;
    --graph-node-document: #9aa5b4;
    --graph-node-policy: #a595d0;
    --graph-node-documentversion: #4fbaba;
    --graph-node-meeting: #5ccf8c;
    --graph-node-matter: #e8a53a;
    --graph-node-recommendation: #f2788a;
    --graph-node-decision: #ff6b5e;
    --graph-node-action: #f0782a;
    --graph-node-party: #7da6dc;
    --graph-node-position: #69db7c;
    --graph-node-role: #69db7c;
    --graph-node-issue: #3bc9db;
    --graph-node-finding: #a3d12e;
    --graph-node-regulation: #f06595;
    --graph-node-risk: #c9a58a;
    --graph-node-strategy: #e6d04a;
    --graph-node-other: #8c96a5;
  }
}

:root[data-theme="dark"] {
  --bg: #131413;
  --panel: #1b1c1a;
  --side: #101110;
  --ink: #edece6;
  --muted: #999eb5;
  --line: #232944;
  --chip: #242522;
  --q: #1c252e;
  --ok-tint: #142928;
  --bad-tint: #2d1a1d;
  --warn-tint: #29271d;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .3);
  --shadow-composer: 0 2px 4px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-dialog: 0 12px 40px rgba(0, 0, 0, .6);
  --shadow-menu: 0 12px 40px rgba(0, 0, 0, .6);
  --accent: #5aa4f1;
  --reg-cat-consumer: #e0a030;
  --reg-cat-aml: #f0746b;
  --reg-cat-capital: #6e9bf0;
  --reg-cat-credit: #c4a565;
  --reg-cat-cyber: #3fb6cc;
  --reg-cat-data: #b58af0;
  --reg-cat-governance: #d77ccf;
  --reg-cat-licensing: #5fc07e;
  --reg-cat-payments: #f08a4b;
  --reg-cat-open-banking: #8fb0e0;
  --reg-cat-accounting: #9aa4b5;
  --reg-cat-outsourcing: #ee7d8c;
  --reg-cat-securities: #5fbfbf;
  --reg-cat-other: #999eb5;
  --reg-mark: #5b4a12;
  --reg-mark-now: #8a6a14;
  --accent-bg: #1c252e;
  --info: #2b8aed;
  --info-tint: #112335;
  --ai: #b79cf0;
  --ai-tint: #231a38;
  --on-accent: #131413;
  --hit: #ff8a3d;
  --ok: #1c9f9e;
  --warn: #f2d676;
  --bad: #ce6578;
  --graph-ink: #edece6;
  --graph-line: #4a5462;
  --graph-muted: #999eb5;
  --graph-bg: #1b1c1a; --graph-dim-opacity: .3;
  --graph-node-body: #6a9bff;
  --graph-node-department: #5cc3e6;
  --graph-node-authority: #b48aee;
  --graph-node-threshold: #d27cc8;
  --graph-node-metric: #c4a060;
  --graph-node-document: #9aa5b4;
  --graph-node-policy: #a595d0;
  --graph-node-documentversion: #4fbaba;
  --graph-node-meeting: #5ccf8c;
  --graph-node-matter: #e8a53a;
  --graph-node-recommendation: #f2788a;
  --graph-node-decision: #ff6b5e;
  --graph-node-action: #f0782a;
  --graph-node-party: #7da6dc;
  --graph-node-position: #69db7c;
  --graph-node-role: #69db7c;
  --graph-node-issue: #3bc9db;
  --graph-node-finding: #a3d12e;
  --graph-node-regulation: #f06595;
  --graph-node-risk: #c9a58a;
  --graph-node-strategy: #e6d04a;
  --graph-node-other: #8c96a5;
}