/* SayHex design tokens.
 *
 * Single source of truth for colour, type, elevation and spacing across the End User Portal,
 * the Customer Admin area and the Central Admin control plane. Surfaces reference these
 * variables; a raw hex value outside this file is a defect, because it puts one surface out of
 * step with the rest the moment a token changes.
 *
 * Values come from the approved design handoff. The five intent colours each carry a tint for
 * fills and a deep variant for text on light backgrounds, so contrast stays legible without a
 * surface inventing its own shade.
 */

:root {
  /* paper and ink */
  --sx-bg: #FAF7F2;
  --sx-sunk: #F3EFE9;
  --sx-raise: #FFFFFF;
  --sx-line: #DCD4C8;
  --sx-soft: #EDE7DE;
  --sx-ink: #14120F;
  --sx-ink-2: #3D3830;
  --sx-muted: #57514A;
  --sx-faint: #8C8377;

  /* accent */
  --sx-accent: #6B3FC4;
  --sx-accent-deep: #57309F;
  --sx-accent-tint: #EADFFA;
  --sx-on-accent: #FBF7FF;

  /* intent families: create, build, analyze, advise, operate */
  --sx-create: #D4522A;
  --sx-create-tint: #F7E0D5;
  --sx-create-deep: #9C3616;
  --sx-build: #3B4CA8;
  --sx-build-tint: #DEE3F8;
  --sx-build-deep: #26307A;
  --sx-analyze: #106B62;
  --sx-analyze-tint: #D5EBE5;
  --sx-analyze-deep: #0A4A43;
  --sx-advise: #7A2E5E;
  --sx-advise-tint: #F2DEEA;
  --sx-advise-deep: #551E41;
  --sx-operate: #5B6420;
  --sx-operate-tint: #E7EBD2;
  --sx-operate-deep: #3D4413;

  /* status */
  --sx-ok: #2F6B3A;
  --sx-warn: #8A5A00;
  --sx-danger: #9C2222;

  /* elevation */
  --sx-e1: 0 1px 2px rgba(40, 28, 16, .07);
  --sx-e2: 0 8px 24px -8px rgba(40, 28, 16, .18);
  --sx-e3: 0 24px 60px -14px rgba(40, 28, 16, .26);

  /* type. Vazirmatn carries Persian so the Farsi surface is not rendered in a fallback face. */
  --sx-font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sx-font-mono: "Geist Mono", ui-monospace, "Cascadia Code", monospace;
  --sx-font-display: "Instrument Serif", Georgia, serif;
  --sx-font-fa: "Vazirmatn", "Geist", system-ui, sans-serif;

  /* spacing and radius */
  --sx-s1: 4px;
  --sx-s2: 8px;
  --sx-s3: 12px;
  --sx-s4: 16px;
  --sx-s5: 24px;
  --sx-s6: 32px;
  --sx-s7: 48px;
  --sx-radius-sm: 8px;
  --sx-radius: 12px;
  --sx-radius-lg: 18px;

  /* layout. The design handoff carried no breakpoints, so these are defined here and every
   * surface uses the same three, rather than each one choosing its own widths. */
  --sx-bp-mobile: 767px;
  --sx-bp-tablet: 1279px;
  --sx-rail-w: 264px;
  --sx-measure: 68ch;
}

/* Persian selects the Vazirmatn stack through the document language rather than a class, so a
 * surface cannot forget to opt in. */
:root:lang(fa),
[lang="fa"] {
  --sx-font-sans: var(--sx-font-fa);
}

/* ---------------------------------------------------------------- handoff parity ----
 * Tokens taken from the design handoff, which the live panel did not carry.
 *
 * These are not extra shades. The design builds depth from surfaces rather than borders alone, and
 * without sunk, raise and the three elevations there is no way to express that: everything flattens
 * onto one plane and the result reads as a different product, which is what the owner saw.
 *
 * The dark palette is the same design, not an inversion. Its accents are lifted so they hold against
 * a dark ground, and its shadows are deeper because a light shadow disappears there.
 */
:root {
  --sx-sunk: #F3EFE9;          /* recessed ground, below the page */
  --sx-raise: #FFFFFF;         /* lifted surface, above the page */
  --sx-line: #E2DBD0;          /* the one border colour */
  --sx-soft: #EDE7DE;          /* quiet fill for chips and inactive controls */
  --sx-ink2: #3D3830;          /* secondary text, still fully readable */
  --sx-faint: #6E665C;         /* the quietest text that stays accessible */
  --sx-accent-deep: #57309F;
  --sx-on-accent: #FBF7FF;
  --sx-accent-tint: #EADFFA;

  /* Deep variants, for text and icons on a group tint where the base would not hold contrast. */
  --sx-create-deep: #8F300F;
  --sx-build-deep: #26307A;
  --sx-analyze-deep: #0A4A43;
  --sx-advise-deep: #551E41;
  --sx-operate-deep: #3D4413;

  --sx-ok: #2F6B3A;
  --sx-warn: #8A5A00;

  --sx-e1: 0 1px 2px rgba(40, 28, 16, .07);
  --sx-e2: 0 8px 24px -8px rgba(40, 28, 16, .18);
  --sx-e3: 0 24px 60px -14px rgba(40, 28, 16, .26);
}

/* Applied by attribute so the choice can be stored against the person rather than guessed from the
   device, while still following the system when they have expressed no preference. */
:root[data-theme="dark"],
body[data-theme="dark"] {
  --sx-bg: #14120F;
  --sx-sunk: #1A1713;
  --sx-raise: #1E1B16;
  --sx-line: #332E27;
  --sx-soft: #26221B;

  --sx-ink: #F5F1EA;
  --sx-ink2: #DCD5CA;
  --sx-muted: #A69C8E;
  --sx-faint: #8C8377;

  --sx-accent: #A98AF2;
  --sx-accent-deep: #C7B0F8;
  --sx-on-accent: #150F22;
  --sx-accent-tint: rgba(169, 138, 242, .18);

  --sx-create: #EE7A4E;
  --sx-build: #7A8CF0;
  --sx-analyze: #2DA896;
  --sx-advise: #D67CB2;
  --sx-operate: #A0B450;
  --sx-create-deep: #F0A385;
  --sx-build-deep: #A3AEF2;
  --sx-analyze-deep: #6FCFBB;
  --sx-advise-deep: #DFA0C6;
  --sx-operate-deep: #BECB80;

  --sx-ok: #6BB37C;
  --sx-warn: #D9A63F;

  /* A shadow that works on cream is invisible here, so depth comes from a darker cast. */
  --sx-e1: none;
  --sx-e2: 0 8px 24px -8px rgba(0, 0, 0, .6);
  --sx-e3: 0 24px 60px -14px rgba(0, 0, 0, .75);
}

/* Available to a screen reader, absent from the page. Shared, because every screen has a label that
   the design shows as a placeholder and assistive technology still needs. */
.sx-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}