/* Pulse V2 design tokens: the same base as apps/web/src/styles/tokens.css (docs/specs/design-system.md).
 *
 * Every colour, radius, font and logo on every screen comes from these custom properties,
 * so a client's brand swaps in by changing one block (D21). Three layers:
 *   1. Base: neutrals, status colours, type, spacing, motion. Shared by every brand.
 *   2. Brand: accent, radius, logo. Set by data-brand on <html>.
 *   3. Theme: light (default) or dark. Set by data-theme on <html>, or by the system setting.
 * Status and effect-class colours never come from the brand: a client can't make "Destructive" green.
 */

:root {
  /* Type: Geist, self-hosted (@font-face below, served by server.ts from the geist package). */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
  --text-2xs: 10px;    /* sidebar section headings (uppercase) */
  --text-xs: 12px;     /* fine print, pill text, row meta */
  --text-sm: 13px;     /* secondary text, buttons */
  --text-base: 14px;   /* body, nav and tables */
  --text-md: 15px;     /* chat text and the ask box */
  --text-lg: 16px;     /* card titles */
  --text-xl: 20px;     /* page titles */
  --text-2xl: 28px;    /* big figures */
  --text-3xl: 36px;
  --text-hero: 48px;   /* Home's greeting */
  --leading-tight: 1.25;
  --leading: 1.5;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-tight: -0.005em;
  --tracking-display: -0.025em;

  /* Spacing (4px grid). Proximity: label-value 4, row-row 12, card-card 16, card padding 24, section 32. */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* Layout: the sidebar and the page float as panels on the canvas, 12px from the edges and each other. */
  --sidebar-width: 256px;
  --shell-gap: 12px;
  --topbar-height: 56px;
  --content-max: 1120px;
  --reading-max: 672px;

  /* Motion. Entrances move on the expo curve; a pressed control springs back. Pages respect
   * prefers-reduced-motion (components.css). */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --duration-fast: 120ms;
  --duration: 200ms;
  --duration-slow: 450ms;

  /* Neutrals, light. Contrast over elevation: the canvas sits a step below the card surface, so cards
   * separate by value, not by shadow. */
  --color-bg: #f3f3f3;
  --color-surface: #ffffff;
  --color-surface-2: #f5f5f5;      /* inset wells, table headers, code, the person card */
  --color-surface-hover: #f5f5f5;
  --color-border: #e5e5e5;
  --color-border-strong: #d4d4d4;
  --color-text: #0a0a0a;
  --color-text-2: #525252;          /* 7.0:1 on the canvas */
  --color-text-3: #696969;          /* 5.0:1 on the canvas, 5.5:1 on white: the lightest text colour used */
  --color-overlay: rgba(10, 10, 10, 0.2);
  /* Shadow means distance from the page, nothing else: resting cards have none. */
  --shadow-sm: 0 0 0 0 transparent;
  --shadow-md: 0 10px 16px -4px rgba(10, 10, 10, 0.12), 0 4px 6px -3px rgba(10, 10, 10, 0.08);   /* floating */
  --shadow-lg: 0 20px 32px -8px rgba(10, 10, 10, 0.18), 0 8px 12px -6px rgba(10, 10, 10, 0.1);   /* overlays */
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px color-mix(in srgb, var(--color-accent) 70%, transparent);

/* Status (never branded). Each has a strong colour for text/icons and a soft fill. */
  --color-ok: #137a43;        --color-ok-soft: #e7f5ec;
  --color-warn: #9a5b00;      --color-warn-soft: #fdf3e1;
  --color-danger: #b42318;    --color-danger-soft: #fdecea;
  --color-info: #2b5cc4;      --color-info-soft: #eaf0fc;
  --color-unknown: #a34a00;   --color-unknown-soft: #fff1e6;
  --color-neutral: #4f5866;   --color-neutral-soft: #eef0f3;

  /* Effect classes (BUILDPLAN 6.3). Fixed across brands. */
  --effect-read: #4f5866;           --effect-read-soft: #eef0f3;
  --effect-internal: #2f5f73;       --effect-internal-soft: #e8f1f4;
  --effect-external: #5a3fc0;       --effect-external-soft: #f0ecfc;
  --effect-financial: #8f5300;      --effect-financial-soft: #fdf1df;
  --effect-destructive: #b42318;    --effect-destructive-soft: #fdecea;

  /* Untrusted outside content (BUILDPLAN 6.7): a hatched gutter, never Pulse's own voice. */
  --color-outside: #7a5a00;
  --color-outside-soft: #fbf7ea;
  --color-outside-border: #e6d9a8;

  /* The Pulse mark used in "Powered by Pulse": never re-branded. */
  --pulse-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2.5-6 5 12 2.5-6h4'/%3E%3C/svg%3E");

  /* Brand: Pulse default. Used by the fleet console and when no client brand is set. A client's brand (D21)
   * replaces the accent and the logo; radii and neutrals are the design system's, not the brand's. */
  --color-accent: #156cdd;          /* 5.0:1 with white text */
  --color-accent-hover: #2b7ae0;
  --color-accent-press: #1361c7;
  --color-accent-soft: #e8f3ff;
  --color-accent-text: #ffffff;
  --color-accent-ink: #1459bd;      /* accent used as text on light surfaces */
  --radius-sm: 8px;
  --radius: 12px;                   /* buttons, inputs, nav items */
  --radius-lg: 16px;                /* cards */
  --radius-xl: 22px;                /* the shell's panels and dialogs */
  --radius-ask: 28px;               /* the ask box */
  --radius-pill: 999px;
  --brand-name: "Pulse";
  --brand-full-name: "Pulse";
  --brand-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2.5-6 5 12 2.5-6h4'/%3E%3C/svg%3E");
  --brand-mark-bg: var(--color-surface-2);
  --brand-mark-fg: var(--color-accent);
  --brand-mark-radius: 12px;
}

/* Brand: Glenmorran Mechanical Services (the demo company). Petrol blue, a trade firm's livery. */
[data-brand="glenmorran"] {
  --brand-name: "Glenmorran";
  --brand-full-name: "Glenmorran Mechanical Services";
  --brand-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c3.6 4.3 6.5 8 6.5 11.6A6.5 6.5 0 0 1 5.5 14.1C5.5 10.5 8.4 6.8 12 2.5Z' fill='black'/%3E%3Cpath d='M12 9.5c1.7 2 3 3.7 3 5.2a3 3 0 0 1-6 0c0-1.5 1.3-3.2 3-5.2Z' fill='white'/%3E%3C/svg%3E");
  --color-accent: #0f5c8c;
  --color-accent-hover: #0b4a72;
  --color-accent-soft: #e6f0f7;
  --color-accent-text: #ffffff;
  --color-accent-ink: #0c5180;
  --radius-sm: 5px;
  --radius: 8px;
  --radius-lg: 12px;
  --brand-mark-bg: #0f5c8c;
  --brand-mark-fg: #ffffff;
  --brand-mark-radius: 7px;
}

/* Brand: Carrowkeel Dental Group (the alternative client, proving the swap). Plum, rounder. */
[data-brand="carrowkeel"] {
  --brand-name: "Carrowkeel Dental";
  --brand-full-name: "Carrowkeel Dental Group";
  --brand-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 9.5C5 6 7.5 4 10 4.6c1 .25 1.4.6 2 .6s1-.35 2-.6C16.5 4 19 6 19 9.5c0 2.8-1.2 4.1-1.8 6.6-.5 2-1 3.9-2.2 3.9-1.5 0-1.4-4.5-3-4.5s-1.5 4.5-3 4.5c-1.2 0-1.7-1.9-2.2-3.9C6.2 13.6 5 12.3 5 9.5Z'/%3E%3C/svg%3E");
  --color-accent: #7a3a86;
  --color-accent-hover: #64306e;
  --color-accent-soft: #f5ebf6;
  --color-accent-text: #ffffff;
  --color-accent-ink: #6d3378;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --brand-mark-bg: #f5ebf6;
  --brand-mark-fg: #7a3a86;
  --brand-mark-radius: 999px;
}

/* Dark theme. Neutrals and soft fills change; strong status colours are lifted for contrast. */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0a0a0a;
  --color-surface: #171717;
  --color-surface-2: #262626;
  --color-surface-hover: #262626;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-text: #fafafa;
  --color-text-2: #bebebe;
  --color-text-3: #a1a1a1;          /* 6.9:1 on the card surface */
  --color-overlay: rgba(0, 0, 0, 0.55);
  /* Deeper on dark, so floating things still lift off the surface. */
  --shadow-md: 0 10px 16px -4px rgba(0, 0, 0, 0.45), 0 4px 6px -3px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 32px -8px rgba(0, 0, 0, 0.55), 0 8px 12px -6px rgba(0, 0, 0, 0.4);

  --color-ok: #5cc98a;        --color-ok-soft: #13291d;
  --color-warn: #e6b04d;      --color-warn-soft: #2d2412;
  --color-danger: #f1776c;    --color-danger-soft: #331a18;
  --color-info: #86a8f0;      --color-info-soft: #18223a;
  --color-unknown: #f39a55;   --color-unknown-soft: #33210f;
  --color-neutral: #aeb6c2;   --color-neutral-soft: #222831;

  --effect-read: #aeb6c2;           --effect-read-soft: #222831;
  --effect-internal: #7fb8cc;       --effect-internal-soft: #142730;
  --effect-external: #ae9cf5;       --effect-external-soft: #221c3d;
  --effect-financial: #e8ad57;      --effect-financial-soft: #2e2211;
  --effect-destructive: #f1776c;    --effect-destructive-soft: #331a18;

  --color-outside: #e2c766;
  --color-outside-soft: #1f1c10;
  --color-outside-border: #4a4220;
}

[data-theme="dark"][data-brand="glenmorran"],
[data-theme="dark"] [data-brand="glenmorran"] {
  --color-accent: #2a72a6;
  --color-accent-hover: #3482b9;
  --color-accent-soft: #11283a;
  --color-accent-text: #ffffff;
  --color-accent-ink: #7dbbe4;
  --brand-mark-bg: #2f84bd;
}

[data-theme="dark"][data-brand="carrowkeel"],
[data-theme="dark"] [data-brand="carrowkeel"] {
  --color-accent: #8e4a9a;
  --color-accent-hover: #9e57aa;
  --color-accent-soft: #2c1a30;
  --color-accent-ink: #d7a4df;
  --brand-mark-bg: #2c1a30;
  --brand-mark-fg: #d7a4df;
}

[data-theme="dark"]:not([data-brand]),
[data-theme="dark"][data-brand="pulse"] {
  --color-accent: #156cdd;
  --color-accent-hover: #2470dc;
  --color-accent-press: #1361c7;
  --color-accent-soft: #1d3041;
  --color-accent-ink: #8cb8f7;
}

@font-face { font-family: "Geist"; src: url("/ui/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/ui/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }