/* TIER 3 — COMPONENT. One block per component family; values reference tier 2 only. Themes override the *-radius tokens (site = square, admin = rounded).
   Cascade rule: var() resolves where the property is DECLARED, so tier 3 must be re-declared in every theme/surface scope — otherwise tier-2 overrides never reach it. Keep this selector list in sync with semantic.css. */
:root, [data-theme="site"], [data-theme="admin"], [data-surface="inverse"] {
  /* Button */
  --button-primary-bg: var(--accent);
  --button-primary-bg-hover: var(--accent-hover);
  --button-primary-bg-active: var(--accent-active);
  --button-primary-ink: var(--ink-on-accent);
  --button-secondary-border: var(--line-strong);
  --button-secondary-ink: var(--ink-brand);
  --button-secondary-bg-hover: var(--brand);
  --button-secondary-ink-hover: var(--ink-on-inverse);
  --button-ghost-ink: var(--ink-primary);
  --button-ghost-underline: var(--accent-soft);
  --button-ghost-underline-hover: var(--accent);
  --button-height-lg: var(--size-control-lg);
  --button-height: var(--size-control);
  --button-height-sm: var(--size-hit-min);
  --button-pad-x-lg: var(--space-8);
  --button-pad-x: var(--space-6);
  --button-radius: var(--radius-0);
  --button-font: var(--weight-medium) var(--text-caption) var(--font-body);
  --button-tracking: var(--tracking-label);
  --button-transform: uppercase;

  /* Link */
  --link-ink: inherit;
  --link-underline: var(--accent);
  --link-underline-offset: 4px;

  /* Card / panel */
  --card-bg: var(--surface-raised);
  --card-border: var(--line);
  --card-radius: var(--radius-0);
  --card-pad: clamp(18px, 4vw, 64px);

  /* Input */
  --input-bg: var(--surface-raised);
  --input-border: var(--line);
  --input-border-focus: var(--focus-ring);
  --input-border-error: var(--danger);
  --input-border-warning: var(--accent);
  --input-ink: var(--ink-primary);
  --input-placeholder: var(--ink-disabled);
  --input-height: var(--size-hit-min);
  --input-radius: var(--radius-0);
  --input-pad-x: var(--space-3);
  --input-label-size: var(--text-caption);
  --input-hint-size: var(--text-eyebrow);
  --input-counter-size: var(--text-micro);

  /* Switch */
  --switch-w: 40px;
  --switch-h: 22px;
  --switch-knob: 18px;
  --switch-on: var(--brand);
  --switch-off: var(--line);
  --switch-danger: var(--danger);      /* Utsolgt */
  --switch-knob-bg: var(--surface-raised);

  /* Tabs */
  --tab-ink: var(--ink-secondary);
  --tab-ink-active: var(--ink-brand);
  --tab-indicator: var(--line-strong);
  --tab-indicator-hover: var(--accent);
  --tab-indicator-w: var(--line-2);
  --tab-rail: var(--line);
  --tab-gap: 28px;

  /* Chip (allergen, filter, type) */
  --chip-border: var(--accent);
  --chip-ink: var(--ink-brand);
  --chip-radius: var(--radius-pill);
  --chip-h: 22px;
  --chip-border-off: var(--line-soft);
  --chip-ink-off: var(--line-leader);
  --chip-bg-on: var(--surface-warning);

  /* Badge (count) */
  --badge-bg: var(--accent);
  --badge-ink: var(--ink-on-accent);
  --badge-h: 20px;

  /* Status dot */
  --dot-size: var(--size-dot);
  --dot-open: var(--status-open);
  --dot-closed: var(--status-closed);
  --dot-border: var(--accent);

  /* Eyebrow / label */
  --eyebrow-ink: var(--ink-secondary);
  --eyebrow-ink-on-inverse: var(--accent);

  /* Divider row (dish, hour, exception) */
  --row-border: var(--line);
  --row-pad-y: 22px;
  --leader-style: 1px dotted var(--line-leader);

  /* Toast */
  --toast-bg: var(--surface-inverse-deep);
  --toast-ink: var(--ink-on-inverse);
  --toast-radius: var(--radius-md);
  --toast-pad: var(--space-3) var(--space-4);

  /* Dialog */
  --dialog-bg: var(--surface-raised);
  --dialog-radius: var(--radius-0);
  --dialog-w: 560px;
  --dialog-pad: var(--space-7);
  --dialog-scrim: var(--strom-ink-a45);
  --dialog-shadow: var(--shadow-dialog);
  --tag-radius: var(--radius-xs);

  /* Skeleton */
  --skeleton-bg: var(--surface-skeleton);

  /* Focus */
  --focus-outline: var(--line-2) solid var(--focus-ring);
  --focus-offset: 3px;
  --selection-outline: var(--line-3) solid var(--accent);   /* selected block in Rediger nettsiden */
}

[data-theme="admin"] {
  --button-primary-bg: var(--brand);
  --button-primary-bg-hover: var(--brand-hover);
  --button-primary-bg-active: var(--brand);
  --button-primary-ink: var(--ink-on-inverse);
  --button-secondary-border: var(--line-strong);
  --button-secondary-ink: var(--ink-brand);
  --button-secondary-bg-hover: var(--surface-hover);
  --button-secondary-ink-hover: var(--ink-brand);
  --button-radius: var(--radius-sm);
  --button-font: var(--weight-medium) var(--text-body-xs) var(--font-body);
  --button-tracking: 0;
  --button-transform: none;
  --button-pad-x: var(--space-5);
  --card-radius: var(--radius-lg);
  --card-pad: 22px;
  --input-radius: var(--radius-sm);
  --dialog-radius: var(--radius-xl);
  --nav-item-h: var(--size-control-sm);
  --nav-item-radius: var(--radius-sm);
  --nav-active-bg: var(--brand);
  --nav-active-ink: var(--ink-on-inverse);
  --nav-hover-bg: var(--surface-hover);
  --stat-value-size: var(--text-heading-lg);
}