/* PIOY - semantic.css */
:root {
  /* Background Colors */
  --up-bg-primary: var(--up-color-white);
  --up-bg-secondary: var(--up-color-gray-50);
  --up-bg-tertiary: var(--up-color-gray-100);
  --up-bg-inverse: var(--up-color-gray-900);
  --up-bg-brand: var(--up-brand-primary);

  /* Surfaces (Cards, Modals) */
  --up-surface-base: var(--up-color-white);
  --up-surface-hover: var(--up-color-gray-50);
  
  /* Text Colors */
  --up-text-primary: var(--up-brand-text);
  --up-text-secondary: var(--up-color-gray-500);
  --up-text-placeholder: var(--up-color-gray-300);
  --up-text-inverse: var(--up-color-white);
  --up-text-brand: var(--up-brand-primary);

  /* Borders & Dividers */
  --up-border-subtle: var(--up-color-gray-100);
  --up-border-default: var(--up-color-gray-200);
  --up-border-hover: var(--up-color-gray-300);
  --up-border-focus: var(--up-brand-primary);

  /* Links */
  --up-link-default: var(--up-brand-primary);
  --up-link-hover: var(--up-brand-primary-hover);

  /* Buttons */
  --up-btn-primary-bg: var(--up-brand-primary);
  --up-btn-primary-text: var(--up-color-white);
  --up-btn-primary-hover-bg: var(--up-brand-primary-hover);
  --up-btn-primary-border: var(--up-color-transparent);
  
  --up-btn-secondary-bg: var(--up-color-white);
  --up-btn-secondary-text: var(--up-brand-primary);
  --up-btn-secondary-border: var(--up-brand-primary);
  --up-btn-secondary-hover-bg: var(--up-color-gray-50);

  --up-btn-outline-text: var(--up-brand-text);
  --up-btn-outline-border: var(--up-color-gray-200);
  --up-btn-outline-hover-bg: var(--up-color-gray-50);

  /* Inputs */
  --up-input-bg: var(--up-color-white);
  --up-input-border: var(--up-color-gray-200);
  --up-input-border-hover: var(--up-color-gray-400);
  --up-input-border-focus: var(--up-brand-primary);
  --up-input-text: var(--up-brand-text);
}