/*
 * Lexxy theme: maps the editor and rendered Action Text content onto the
 * application palette.
 *
 * The base styles come from the lexxy gem. They are imported into Tailwind's
 * components layer so they beat the preflight reset but yield to utilities.
 * This file loads before the Tailwind build, so it declares the layer order
 * first; otherwise components would rank below base.
 */
@layer theme, base, components, utilities;
@import url("/assets/lexxy-88eefe5e.css") layer(components);

:root {
  --lexxy-font-base: Outfit, sans-serif;

  --lexxy-color-ink: #1d2939;            /* gray-800 */
  --lexxy-color-ink-medium: #475467;     /* gray-600 */
  --lexxy-color-ink-light: #98a2b3;      /* gray-400 */
  --lexxy-color-ink-lighter: #d0d5dd;    /* gray-300 */
  --lexxy-color-ink-lightest: #f2f4f7;   /* gray-100 */
  --lexxy-color-ink-inverted: #ffffff;

  --lexxy-color-accent-dark: #35998f;    /* brand-600 */
  --lexxy-color-accent-medium: #5cc0b5;  /* brand-400 */
  --lexxy-color-accent-light: #cfeeea;   /* brand-100 */
  --lexxy-color-accent-lightest: #e7f6f4; /* brand-50 */
  --lexxy-color-blue: #45b5a9;           /* brand-500 */
}

.dark {
  --lexxy-color-ink: #e4e7ec;            /* gray-200 */
  --lexxy-color-ink-medium: #98a2b3;     /* gray-400 */
  --lexxy-color-ink-light: #667085;      /* gray-500 */
  --lexxy-color-ink-lighter: #344054;    /* gray-700 */
  --lexxy-color-ink-lightest: #1d2939;   /* gray-800 */
  --lexxy-color-ink-inverted: #101828;   /* gray-900 */

  --lexxy-color-accent-dark: #7cccc3;    /* brand-300 */
  --lexxy-color-accent-medium: #45b5a9;  /* brand-500 */
  --lexxy-color-accent-light: #1f4f4b;   /* brand-900 */
  --lexxy-color-accent-lightest: #103330; /* brand-950 */
  --lexxy-color-blue: #5cc0b5;           /* brand-400 */

  --lexxy-shadow: 0 0 0 1px rgba(100, 100, 100, 0.3);

  /* Derived colors resolve where they are declared (:root), so they must be
     declared again to pick up the dark palette above. */
  --lexxy-color-canvas: var(--lexxy-color-ink-inverted);
  --lexxy-color-text: var(--lexxy-color-ink);
  --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
  --lexxy-color-link: var(--lexxy-color-accent-dark);
  --lexxy-color-selected: var(--lexxy-color-accent-lightest);
  --lexxy-color-selected-hover: var(--lexxy-color-accent-light);
  --lexxy-color-selected-dark: var(--lexxy-color-blue);
  --lexxy-color-selected-50: color-mix(in oklch, var(--lexxy-color-selected-dark) 50%, transparent);
  --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);
  --lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);
  --lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);
  --lexxy-color-table-cell-selected: var(--lexxy-color-selected);
  --lexxy-color-table-cell-selected-border: var(--lexxy-color-selected-dark);
  --lexxy-color-table-cell-selected-bg: var(--lexxy-color-accent-lightest);
  --lexxy-color-table-cell-add: var(--lexxy-color-selected-50);
  --lexxy-color-table-cell-toggle: var(--lexxy-color-accent-lightest);
  --lexxy-focus-ring-color: var(--lexxy-color-accent-dark);
}

/* Rendered content follows the text color of the surrounding view. */
:where(.lexxy-content:not(lexxy-editor)) {
  color: inherit;
}

/* Mentions are stored as application/vnd.capa.mention, outside the
   actiontext namespace Lexxy styles by default. The editor content is
   pre-wrap, which would turn the partial's indentation into line breaks. */
action-text-attachment[content-type="application/vnd.capa.mention"] {
  white-space: normal;

  &.node--selected {
    outline: none;
    background-color: var(--lexxy-color-selected);
    border-radius: var(--lexxy-radius);
  }
}