/* 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;
  --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-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-other: #888888;
  --graph-shape-body: round-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-other: ellipse;
  --graph-size-body: 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-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: dashed;  /* Cytoscape line-style: solid, dashed or dotted */
  --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-max: 3;
  --graph-min-font: 7;             /* labels smaller than this on screen are not drawn */

  /* 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-max: 980px;
  --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) */
  --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;
  --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;
    --accent-bg: #1c252e;
    --info: #2b8aed;
    --info-tint: #112335;
    --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-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-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;
  --accent-bg: #1c252e;
  --info: #2b8aed;
  --info-tint: #112335;
  --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-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-other: #8c96a5;
}