/* Craik brand components: components.css

   Written by hand. This file holds structure only: every brand value
   (colour, font, size, corner, padding) comes from a variable in tokens.css,
   which is generated from brand/DESIGN.md.
   To change how a component looks, change DESIGN.md and regenerate
   tokens.css. Edit this file only to change how a component is built.

   Load tokens.css first, then this file. Class names start with "brand-".
   See README.md in this folder for the class list and usage.

   Copyright 2026 Craik AI Inc. */


/* ------------------------------------------------------------------
   Base. :where() gives these rules zero specificity, so any style a
   page sets for itself wins over them.
   ------------------------------------------------------------------ */

:where(html, [data-theme]) {
  background: var(--brand-color-background);
  color: var(--brand-color-text);
  font: var(--brand-type-body-ui);
  letter-spacing: var(--brand-type-body-ui-tracking);
  font-kerning: normal;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  text-rendering: optimizeLegibility;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-color-primary);
  outline-offset: 2px;
}

:root {
  --brand-gradient-aurora: linear-gradient(90deg, var(--brand-color-gradient-start), var(--brand-color-gradient-mid), var(--brand-color-gradient-end));
}


/* ------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------ */

.brand-display {
  font: var(--brand-type-display);
  letter-spacing: var(--brand-type-display-tracking);
}

.brand-headline-lg {
  font: var(--brand-type-headline-lg);
  letter-spacing: var(--brand-type-headline-lg-tracking);
}

.brand-headline-md {
  font: var(--brand-type-headline-md);
  letter-spacing: var(--brand-type-headline-md-tracking);
}

.brand-stat {
  font: var(--brand-type-stat);
  letter-spacing: var(--brand-type-stat-tracking);
}

.brand-eyebrow {
  font: var(--brand-type-eyebrow);
  letter-spacing: var(--brand-type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--brand-color-text-muted);
}

.brand-body-marketing {
  font: var(--brand-type-body-marketing);
  letter-spacing: var(--brand-type-body-marketing-tracking);
  max-width: 60ch;
}

.brand-body-ui {
  font: var(--brand-type-body-ui);
  letter-spacing: var(--brand-type-body-ui-tracking);
}

.brand-caption {
  font: var(--brand-type-caption);
  letter-spacing: var(--brand-type-caption-tracking);
  color: var(--brand-color-text-muted);
}

.brand-data-label {
  font: var(--brand-type-data-label);
  letter-spacing: var(--brand-type-data-label-tracking);
}

/* One key word of a headline in the signature colour. */
.brand-emphasis {
  color: var(--brand-hero-emphasis-color);
}


/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */

.brand-button-primary,
.brand-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--brand-space-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.brand-button-primary {
  background: var(--brand-button-primary-background);
  color: var(--brand-button-primary-color);
  font: var(--brand-button-primary-font);
  letter-spacing: var(--brand-button-primary-tracking);
  border-radius: var(--brand-button-primary-radius);
  padding: var(--brand-button-primary-padding);
}

.brand-button-primary:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--brand-button-primary-hover-background);
}

.brand-button-primary:active:not(:disabled, [aria-disabled="true"]) {
  background: var(--brand-button-primary-pressed-background);
}

.brand-button-secondary {
  background: var(--brand-button-secondary-background);
  color: var(--brand-button-secondary-color);
  border-color: var(--brand-button-secondary-border-color);
  font: var(--brand-button-secondary-font);
  letter-spacing: var(--brand-button-secondary-tracking);
  border-radius: var(--brand-button-secondary-radius);
  padding: var(--brand-button-secondary-padding);
}

.brand-button-secondary:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--brand-button-secondary-hover-background);
  color: var(--brand-button-secondary-hover-color);
  border-color: var(--brand-button-secondary-hover-border-color);
}

.brand-button-secondary:active:not(:disabled, [aria-disabled="true"]) {
  background: var(--brand-button-secondary-pressed-background);
  color: var(--brand-button-secondary-pressed-color);
  border-color: var(--brand-button-secondary-pressed-border-color);
}

.brand-button-primary:disabled,
.brand-button-primary[aria-disabled="true"],
.brand-button-secondary:disabled,
.brand-button-secondary[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ------------------------------------------------------------------
   Tag or chip
   ------------------------------------------------------------------ */

.brand-tag {
  display: inline-flex;
  align-items: center;
  background: var(--brand-tag-background);
  color: var(--brand-tag-color);
  border: 1px solid var(--brand-tag-border-color);
  font: var(--brand-tag-font);
  letter-spacing: var(--brand-tag-tracking);
  border-radius: var(--brand-tag-radius);
  padding: var(--brand-tag-padding);
}


/* ------------------------------------------------------------------
   Link
   ------------------------------------------------------------------ */

.brand-link {
  color: var(--brand-link-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.brand-link:hover {
  text-decoration-thickness: 2px;
}


/* ------------------------------------------------------------------
   Text input (input, textarea, select)
   ------------------------------------------------------------------ */

.brand-input {
  box-sizing: border-box;
  background: var(--brand-input-background);
  color: var(--brand-input-color);
  border: 1px solid var(--brand-input-border-color);
  font: var(--brand-input-font);
  letter-spacing: var(--brand-input-tracking);
  border-radius: var(--brand-input-radius);
  padding: var(--brand-input-padding);
}

.brand-input::placeholder {
  color: var(--brand-color-text-muted);
  opacity: 1;
}

.brand-input:focus {
  border-color: var(--brand-input-focus-border-color);
}

.brand-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ------------------------------------------------------------------
   Card and aurora gradient
   ------------------------------------------------------------------ */

.brand-card {
  background: var(--brand-card-background);
  border: 1px solid var(--brand-card-border-color);
  border-radius: var(--brand-card-radius);
  padding: var(--brand-card-padding);
}

/* Decorative only: hero graphics, banners, brand moments. Never set body
   text on the gradient. */
.brand-aurora {
  background-image: var(--brand-gradient-aurora);
}


/* ------------------------------------------------------------------
   Error alert. Put the word "Error" in .brand-alert-label.
   ------------------------------------------------------------------ */

.brand-alert-error {
  background: var(--brand-alert-error-background);
  color: var(--brand-alert-error-color);
  border: 1px solid var(--brand-alert-error-border-color);
  border-radius: var(--brand-alert-error-radius);
  padding: var(--brand-alert-error-padding);
}

.brand-alert-label {
  color: var(--brand-alert-error-label-color);
}


/* ------------------------------------------------------------------
   Chat. Use .brand-input for the chat input box.
   ------------------------------------------------------------------ */

.brand-chat-message-user {
  background: var(--brand-chat-message-user-background);
  color: var(--brand-chat-message-user-color);
  font: var(--brand-chat-message-user-font);
  letter-spacing: var(--brand-chat-message-user-tracking);
  border-radius: var(--brand-chat-message-user-radius);
  padding: var(--brand-chat-message-user-padding);
}

.brand-chat-response {
  color: var(--brand-chat-response-color);
  font: var(--brand-chat-response-font);
  letter-spacing: var(--brand-chat-response-tracking);
}

.brand-chat-speaker {
  color: var(--brand-chat-speaker-color);
  font: var(--brand-chat-speaker-font);
  letter-spacing: var(--brand-chat-speaker-tracking);
}

.brand-chat-helper {
  font: var(--brand-type-chat-helper);
  letter-spacing: var(--brand-type-chat-helper-tracking);
  color: var(--brand-color-text-muted);
}


/* ------------------------------------------------------------------
   Code
   ------------------------------------------------------------------ */

.brand-code {
  background: var(--brand-code-inline-background);
  color: var(--brand-code-inline-color);
  font: var(--brand-code-inline-font);
  letter-spacing: var(--brand-code-inline-tracking);
  border-radius: var(--brand-code-inline-radius);
  padding: var(--brand-code-inline-padding);
}

.brand-code-block {
  display: block;
  margin: 0;
  overflow-x: auto;
  white-space: pre;
  background: var(--brand-code-block-background);
  color: var(--brand-code-block-color);
  border: 1px solid var(--brand-code-block-border-color);
  font: var(--brand-code-block-font);
  letter-spacing: var(--brand-code-block-tracking);
  font-feature-settings: var(--brand-type-code-block-features);
  font-variant-ligatures: none;
  border-radius: var(--brand-code-block-radius);
  padding: var(--brand-code-block-padding);
}

.brand-code-header {
  font: var(--brand-type-code-header);
  letter-spacing: var(--brand-type-code-header-tracking);
  color: var(--brand-color-text-muted);
}

.brand-code-line-number {
  color: var(--brand-code-line-number-color);
  font: var(--brand-code-line-number-font);
  letter-spacing: var(--brand-code-line-number-tracking);
  user-select: none;
  -webkit-user-select: none;
}

.brand-syntax-keyword  { color: var(--brand-color-syntax-keyword); }
.brand-syntax-string   { color: var(--brand-color-syntax-string); }
.brand-syntax-function { color: var(--brand-color-syntax-function); }
.brand-syntax-comment  { color: var(--brand-color-syntax-comment); }