/* Copied from phase-figma design/tokens.css at ce4124a. Do not edit. Light only. */
/*
 * Phase design tokens  (phase-figma/design/tokens.css)
 * ------------------------------------------------------------------
 * Source of truth: the Figma screens in phase-figma/references/. Values marked
 * "sampled" were read pixel-for-pixel from those PNGs (see REFERENCE-NOTES.md
 * and design/DESIGN.md section 3). Where a sampled colour fails WCAG AA as TEXT,
 * the text token is the nearest darker value and the sampled value is kept for
 * fills/borders.
 *
 * LIGHT ONLY. There is no dark theme, no dark toggle and no dark media query.
 * `--ph-grey-900` and `--ph-slate` are the darkest values in the system: the
 * first is for TEXT only, the second only for the one dark slate BUTTON FILL
 * (reference dashboard-*.png "View Full Dashboard"). Never page/card backgrounds.
 * Run design/check-light-only.sh before committing.
 */

/* Inter (SIL OFL 1.1, bundled, latin subset) so the appliance UI never needs a CDN. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-var.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ---- Neutrals: cool slate (Fluid / GridWatch screens) ------------------ */
  --ph-grey-0:   #ffffff;   /* cards, sidebar, tables, inputs (sampled #ffffff) */
  --ph-grey-25:  #fbfcfe;
  --ph-grey-50:  #f7f9fc;   /* page canvas (sampled app-01 / table-01) */
  --ph-grey-100: #f1f4f8;   /* segmented-control track, skeleton (sampled) */
  --ph-grey-150: #e8ecf1;   /* (sampled) */
  --ph-grey-200: #e3e5e9;   /* card + table hairlines (sampled; GridWatch #ececec, Untitled-gray #e9eaeb) */
  --ph-grey-300: #d3d8de;   /* outlined-button border (sampled) */
  --ph-grey-400: #a7b1bd;   /* decorative icons, disabled glyphs (sampled; NOT for text) */
  --ph-grey-500: #8a94a0;   /* input/checkbox border: 3.2:1 on white (sampled) */
  --ph-grey-600: #677386;   /* tertiary text: 4.9:1 on white (sampled) */
  --ph-grey-700: #4d596c;   /* secondary text */
  --ph-grey-800: #354357;   /* body text (sampled) */
  --ph-grey-900: #1f2a3c;   /* titles. TEXT ONLY, never a background. (sampled #28364c, a touch darker) */

  /* ---- Action blue: one calm blue --------------------------------------- */
  --ph-accent-50:  #f4f7ff;
  --ph-accent-100: #eaf0ff;   /* selected nav pill, sensor tag (sampled app-01) */
  --ph-accent-150: #f0f2f9;   /* selected history row (sampled chat-04) */
  --ph-accent-200: #d1dcf6;   /* (sampled) */
  --ph-accent-300: #9aafe7;   /* (sampled) */
  --ph-accent-400: #6d8bd4;   /* (sampled) */
  --ph-accent-500: #4f73cb;   /* send button fill (sampled chat-04) */
  --ph-accent-600: #365fd0;   /* links, primary button (sampled app-01) */
  --ph-accent-700: #2b4eb0;   /* hover; selected-nav text (sampled #3259b5 is lighter, 5.9:1 on pill) */
  --ph-accent-800: #223c8c;   /* pressed */

  /* GridWatch uses a sky blue for view toggles and "Water" chips */
  --ph-sky-50:  #f0f9ff;      /* (sampled console-01 selected nav pill) */
  --ph-sky-100: #d1e9ff;      /* (sampled console-01 active toggle) */
  --ph-sky-fg:  #1f5f93;

  /* ---- Dashboard / chart palette (BrainPlatform screens) ------------------ */
  --ph-chart-amber:  #d89d02;  --ph-chart-amber-lt:  #f2dfaa;  /* electricity (sampled) */
  --ph-chart-purple: #6c0590;  --ph-chart-purple-lt: #e6c7ee;  /* gas */
  --ph-chart-green:  #4aa83a;  --ph-chart-green-lt:  #b8e7c4;  /* solar */
  --ph-chart-blue:   #4175fb;  --ph-chart-blue-lt:   #bcd2fe;  /* water */
  --ph-chart-teal:   #2bb3a6;  --ph-chart-teal-lt:   #b6e3de;  /* shared secondary (sampled #72cbb8 / #5fb7ba) */
  --ph-chart-red:    #e5594f;  --ph-chart-red-lt:    #ea8b82;  /* peaks (sampled) */
  --ph-chart-band:   #e3e3ff;  --ph-chart-band-dk:   #c7c6ff;  --ph-chart-line: #5757e6;
  --ph-slate:        #404d61;  /* the single dark slate BUTTON FILL (sampled). Button fill only. */

  /* ---- Semantic soft pills: fg is AA on bg and on white ------------------- */
  --ph-success-bg: #ecf7f1;  --ph-success-bd: #c9e8d6;  --ph-success-fg: #276b49;  --ph-success-solid: #3e9a6a;  /* sampled bg #eaf6ed / #edf7f3, text #42845d lightened for fill only */
  --ph-warn-bg:    #fdf6e7;  --ph-warn-bd:    #f4e5cd;  --ph-warn-fg:    #8a5a0f;  --ph-warn-solid:    #d89d02;  /* sampled bg #fdf6e7 */
  --ph-orange-bg:  #fdf6ee;  --ph-orange-bd:  #faebda;  --ph-orange-fg:  #a8481a;  --ph-orange-solid:  #e66823;  /* sampled bg #fdf6ee (GridWatch "Snoozed", type chips) */
  --ph-danger-bg:  #fcf1f3;  --ph-danger-bd:  #f6d6dc;  --ph-danger-fg:  #b3263f;  --ph-danger-solid:  #c43650;  /* sampled bg #fcf0f3 / #fcf3f2 */
  --ph-info-bg:    #eef4ff;  --ph-info-bd:    #dfe8fe;  --ph-info-fg:    #2f55b8;  --ph-info-solid:    #4f73cb;  /* sampled bg #eef4ff */
  --ph-purple-bg:  #f4f3ff;  --ph-purple-bd:  #eae8ff;  --ph-purple-fg:  #5a2fcb;  --ph-purple-solid:  #6d3fe1;  /* sampled bg #f4f3ff ("Acknowledge") */
  --ph-neutral-bg: #f5f6f8;  --ph-neutral-bd: #e9ecf0;  --ph-neutral-fg: #5a6577;  --ph-neutral-solid: #8a94a0;  /* "Open", "Users" */

  /* ---- Semantic roles ------------------------------------------------------ */
  --ph-bg-canvas:   var(--ph-grey-50);
  --ph-bg-surface:  var(--ph-grey-0);
  --ph-bg-subtle:   #f8fafd;              /* table head band (sampled table-01) */
  --ph-bg-hover:    var(--ph-grey-50);
  --ph-bg-selected: var(--ph-accent-100);
  --ph-bg-dots:     #cfd6e0;              /* dotted-grid dots of the diagram canvas */

  --ph-text:        var(--ph-grey-900);
  --ph-text-2:      var(--ph-grey-700);
  --ph-text-3:      var(--ph-grey-600);   /* lightest text we allow (AA) */
  --ph-text-on-accent: #ffffff;
  --ph-link:        var(--ph-accent-600);
  --ph-link-hover:  var(--ph-accent-800);

  --ph-border:        var(--ph-grey-200);
  --ph-border-strong: var(--ph-grey-500);   /* controls that must be findable (WCAG 1.4.11) */
  --ph-border-button: var(--ph-grey-300);   /* outlined buttons carry text, so a soft edge is fine */
  --ph-focus:         var(--ph-accent-600);
  --ph-focus-halo:    var(--ph-accent-200);

  /* ---- Typography ------------------------------------------------------------ */
  --ph-font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ph-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --ph-text-2xs:  0.6875rem;  /* 11  tiny caps section labels, captions */
  --ph-text-xs:   0.75rem;    /* 12  captions, pills */
  --ph-text-sm:   0.8125rem;  /* 13  table cells, secondary */
  --ph-text-base: 0.875rem;   /* 14  body */
  --ph-text-md:   1rem;       /* 16  inputs on touch, composer */
  --ph-text-lg:   1.125rem;   /* 18  card titles */
  --ph-text-xl:   1.5rem;     /* 24  page titles */
  --ph-text-2xl:  1.875rem;   /* 30  auth + big numbers */
  --ph-text-3xl:  2.5rem;     /* 40  KPI hero, donut centre */

  --ph-leading-tight: 1.2;
  --ph-leading-snug:  1.4;
  --ph-leading-body:  1.5;
  --ph-weight-regular: 400;
  --ph-weight-medium:  500;     /* titles are medium, never heavy (notes) */
  --ph-weight-strong:  600;
  --ph-tracking-caps:  0.08em;

  /* ---- Spacing: 4px base --------------------------------------------------------- */
  --ph-space-0:  0;
  --ph-space-1:  0.25rem;
  --ph-space-2:  0.5rem;
  --ph-space-3:  0.75rem;
  --ph-space-4:  1rem;
  --ph-space-5:  1.5rem;
  --ph-space-6:  2rem;
  --ph-space-7:  3rem;
  --ph-space-8:  4rem;

  /* ---- Radius ------------------------------------------------------------------------ */
  --ph-radius-xs:   4px;     /* tags, sensor chips, "Done" pill */
  --ph-radius-sm:   6px;     /* buttons, inputs, nav pills */
  --ph-radius-md:   8px;     /* cards (the Figma card radius) */
  --ph-radius-lg:   12px;    /* composer, modals, big cards */
  --ph-radius-pill: 999px;

  /* ---- Elevation: almost none -------------------------------------------------------- */
  --ph-shadow-0: none;
  --ph-shadow-1: 0 1px 2px rgb(31 42 60 / 0.04);
  --ph-shadow-2: 0 2px 6px rgb(31 42 60 / 0.06), 0 1px 2px rgb(31 42 60 / 0.04);
  --ph-shadow-3: 0 12px 28px rgb(31 42 60 / 0.12), 0 2px 6px rgb(31 42 60 / 0.06);   /* popovers, modals, toasts */
  --ph-scrim:    rgb(247 249 252 / 0.8);   /* LIGHT scrim behind modals. Never black. */

  /* ---- Motion --------------------------------------------------------------------------- */
  --ph-ease: cubic-bezier(0.2, 0, 0, 1);
  --ph-dur-fast: 120ms;
  --ph-dur-base: 180ms;
  --ph-dur-slow: 260ms;

  /* ---- Layout ------------------------------------------------------------------------------ */
  --ph-tap: 2.75rem;
  --ph-control-h: 2.25rem;     /* 36px: Figma buttons/inputs are compact */
  --ph-content-max: 80rem;
  --ph-auth-max: 26rem;
  --ph-sidebar-w: 14.5rem;     /* ~232 (chat 240, console 200, Fluid 180) */
  --ph-topbar-h: 3.5rem;
  --ph-z-nav: 20;
  --ph-z-pop: 40;
  --ph-z-modal: 50;
  --ph-z-toast: 60;
}