/**
 * @file theme.css
 * Hard Rain palette for drupal-matrix.dev, overriding Mercury's src/theme.css.
 *
 * Brand colours come from Canvas Brand Kit; hex fallbacks cover pages without
 * it. See docs/superpowers/specs/2026-10-15-arklet-branding-design.md.
 */

:root {
  --background: var(--void, #0E0A09);
  --foreground: var(--moonlight, #F2EBE3);
  --card: var(--hull, #18120F);
  --card-foreground: var(--moonlight, #F2EBE3);
  --primary: var(--hard-rain, #FF6B2C);
  --primary-foreground: #140703;
  --secondary: var(--seam, #2E2420);
  --secondary-foreground: var(--moonlight, #F2EBE3);
  --muted: var(--hull, #18120F);
  --muted-foreground: var(--ash, #BFB2A6);
  --accent: var(--hull, #18120F);
  --accent-foreground: var(--ember, #FF8A55);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: var(--seam, #2E2420);
  --input: var(--seam, #2E2420);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --font-body: "Inter", Arial, Helvetica, sans-serif;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

.dark {
  --background: var(--void, #0E0A09);
  --foreground: var(--moonlight, #F2EBE3);
  --card: var(--hull, #18120F);
  --card-foreground: var(--moonlight, #F2EBE3);
  --primary: var(--hard-rain, #FF6B2C);
  --primary-foreground: #140703;
  --secondary: var(--seam, #2E2420);
  --secondary-foreground: var(--moonlight, #F2EBE3);
  --muted: var(--hull, #18120F);
  --muted-foreground: var(--ash, #BFB2A6);
  --accent: var(--hull, #18120F);
  --accent-foreground: var(--ember, #FF8A55);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: var(--seam, #2E2420);
  --input: var(--seam, #2E2420);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
}

/* Cloud Ark mark beside the site name in the branding block. */
a[rel="home"]:has(> .branding) {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
a[rel="home"] > .branding {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
}

/* Advanced Comment Threads on the dark palette. */
:root {
  --act-color-text: var(--moonlight, #F2EBE3);
  --act-color-muted: var(--ash, #BFB2A6);
  --act-color-accent: var(--hard-rain, #FF6B2C);
  --act-color-focus: var(--ember, #FF8A55);
  --act-color-line: #45362F;
  --act-color-paper: var(--hull, #18120F);
  --act-color-compact-read: var(--hull, #18120F);
  --act-color-read: #1F1814;
  --act-color-unread: #2A1D17;
  --act-color-editorial-unread: #2A1D17;
  --advanced-comment-new: #2A1D17;
  --act-color-unread-edge: var(--hard-rain, #FF6B2C);
  --act-color-selected: #33221A;
  --act-color-loading: #2A1A0F;
  --advanced-comment-loading: #2A1A0F;
  --act-color-loading-edge: var(--ember, #FF8A55);
  --act-color-loading-text: var(--moonlight, #F2EBE3);
  --act-color-avatar: var(--seam, #2E2420);
  --act-color-danger: #FF7A6E;
}
.act-reply-form {
  color-scheme: dark;
}

/* Mercury highlights a focused field's label with --accent, which this
   palette uses as a surface colour; use Ember so the label stays legible. */
.form-item:focus-within > label,
.fieldgroup:focus-within .fieldset-legend {
  color: var(--ember, #FF8A55);
}

/* CKEditor 5 inside comment reply forms, on the dark palette. */
.act-reply-form {
  --ck-color-base-background: var(--void, #0E0A09);
  --ck-color-base-foreground: var(--hull, #18120F);
  --ck-color-base-border: var(--seam, #2E2420);
  --ck-color-base-text: var(--moonlight, #F2EBE3);
  --ck-color-text: var(--moonlight, #F2EBE3);
  --ck-color-toolbar-background: var(--hull, #18120F);
  --ck-color-toolbar-border: var(--seam, #2E2420);
  --ck-color-button-default-hover-background: var(--seam, #2E2420);
  --ck-color-button-default-active-background: var(--seam, #2E2420);
  --ck-color-button-on-background: #33221A;
  --ck-color-button-on-hover-background: #3D2A20;
  --ck-color-button-on-color: var(--ember, #FF8A55);
  --ck-color-dropdown-panel-background: var(--hull, #18120F);
  --ck-color-dropdown-panel-border: var(--seam, #2E2420);
  --ck-color-panel-background: var(--hull, #18120F);
  --ck-color-panel-border: var(--seam, #2E2420);
  --ck-color-list-background: var(--hull, #18120F);
  --ck-color-list-button-hover-background: var(--seam, #2E2420);
  --ck-color-list-button-on-background: #33221A;
  --ck-color-list-button-on-text: var(--ember, #FF8A55);
  --ck-color-input-background: var(--void, #0E0A09);
  --ck-color-input-border: var(--seam, #2E2420);
  --ck-color-input-text: var(--moonlight, #F2EBE3);
  --ck-color-labeled-field-label-background: var(--hull, #18120F);
  --ck-color-focus-border: var(--ember, #FF8A55);
  --ck-color-shadow-drop: rgba(0, 0, 0, .4);
  --ck-color-tooltip-background: var(--seam, #2E2420);
  --ck-color-tooltip-text: var(--moonlight, #F2EBE3);
}
.act-reply-form .ck.ck-editor__editable:not(.ck-focused) {
  border-color: var(--seam, #2E2420);
}