/* JP Pirinen — Morning Light — Component tokens (generated from tokens/tokens.json → component.*) */
:root {
  /* button — primary */
  --button-primary-bg: var(--color-amber-500);
  --button-primary-text: var(--color-neutral-900);
  --button-primary-border: transparent;
  --button-primary-bg-hover: var(--color-amber-600);
  --button-primary-bg-pressed: var(--color-amber-700);
  --button-primary-bg-disabled: var(--color-neutral-200);
  --button-primary-text-disabled: var(--color-neutral-400);

  /* button — secondary */
  --button-secondary-bg: transparent;
  --button-secondary-text: var(--color-green-500);
  --button-secondary-border: var(--color-green-500);
  --button-secondary-bg-hover: var(--color-green-50);
  --button-secondary-bg-pressed: var(--color-green-100);
  --button-secondary-bg-disabled: var(--color-neutral-100);
  --button-secondary-text-disabled: var(--color-neutral-400);

  /* button — ghost */
  --button-ghost-bg: transparent;
  --button-ghost-text: var(--color-neutral-900);
  --button-ghost-border: transparent;
  --button-ghost-bg-hover: var(--color-neutral-100);
  --button-ghost-bg-pressed: var(--color-neutral-200);
  --button-ghost-bg-disabled: transparent;
  --button-ghost-text-disabled: var(--color-neutral-400);

  /* button — shared shape + sizes */
  --button-radius: var(--radius-md);
  --button-font-weight: var(--font-weight-semibold);
  --button-size-sm-height: 32px;
  --button-size-sm-padding-x: var(--space-4);
  --button-size-sm-font-size: var(--font-size-sm);
  --button-size-md-height: 44px;
  --button-size-md-padding-x: var(--space-6);
  --button-size-md-font-size: var(--font-size-base);
  --button-size-lg-height: 56px;
  --button-size-lg-padding-x: var(--space-8);
  --button-size-lg-font-size: var(--font-size-md);

  /* card */
  --card-bg: var(--color-bg-surface);
  --card-border: var(--color-border-default);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);
  --card-padding: var(--space-6);
  --card-hover-shadow: var(--shadow-lg);

  /* form input */
  --input-bg: var(--color-neutral-100);
  --input-border: var(--color-border-default);
  --input-border-focus: var(--color-focus-ring);
  --input-border-error: var(--color-error-300);
  --input-radius: var(--radius-sm);
  --input-padding-x: var(--space-4);
  --input-padding-y: var(--space-3);
  --input-font-size: var(--font-size-base);
  --input-placeholder-color: var(--color-text-tertiary);
  --input-label-font-size: var(--font-size-sm);
  --input-label-font-weight: var(--font-weight-medium);
  --input-label-color: var(--color-text-primary);
  --input-helper-font-size: var(--font-size-xs);
  --input-helper-color: var(--color-text-secondary);
  --input-error-font-size: var(--font-size-xs);
  --input-error-color: var(--color-error-500);

  /* navigation — frosted glass */
  --nav-bg: rgba(253,251,245,0.82);
  --nav-bg-scrolled: rgba(253,251,245,0.94);
  --nav-blur: 12px;
  --nav-border: rgba(222,222,216,0.6);
  --nav-height: 80px;
  --nav-item-color: var(--color-text-secondary);
  --nav-item-color-hover: var(--color-text-primary);
  --nav-item-color-active: var(--color-green-500);
  --nav-glass-backdrop: blur(12px); /* @kind other */
  --nav-glass-opacity: 0.82; /* @kind other */

  /* badge / tag */
  --badge-bg: var(--color-sage-100);
  --badge-text: var(--color-sage-800);
  --badge-border: var(--color-sage-200);
  --badge-radius: var(--radius-sm);
  --badge-padding-x: var(--space-3);
  --badge-padding-y: var(--space-1);
  --badge-font-size: var(--font-size-xs);

  /* divider */
  --divider-color: var(--color-border-default);
  --divider-height: 1px;
  --divider-spacing: var(--space-8);
}