/* Olowo semantic design tokens
 *
 * This file does not introduce a second token system. Every value below maps to
 * a primitive that already exists in public_html/themes/<theme>.css (colour) or
 * public_html/theme/spacing.css (spacing, radius, sizing). Fallbacks are given
 * so components render correctly even when only the theme file is loaded.
 *
 * Load order: /themes/<theme>.css, then this file, then components.css.
 *
 * Naming: semantic role, never page name.
 *   --color-surface-*  container backgrounds
 *   --color-text-*     foreground text
 *   --color-action-*   interactive intent
 *   --color-status-*   state communication
 *   --tone-*-bg/-fg    paired badge tones
 */

:root {
  /* Surfaces */
  --color-surface-page: var(--background, #f2f5ef);
  --color-surface-card: var(--surface-container-lowest, #ffffff);
  --color-surface-sunken: var(--surface-container-low, #f4f3f1);
  --color-surface-muted: var(--surface-container, #efeeeb);
  --color-surface-inverse: var(--inverse-surface, #2f312f);

  /* Text */
  --color-text-primary: var(--ink, #1a1c1a);
  --color-text-secondary: var(--ink-muted, #524437);
  --color-text-tertiary: var(--ink-faint, #847466);
  --color-text-inverse: var(--inverse-on-surface, #f2f1ee);

  /* Borders and separators.
     #F5F5F5 is the house hairline: one colour for every card edge, divider and
     input outline across the app. It is set here rather than taken from the
     theme's --border so a theme swap can't quietly change it; a theme that
     genuinely needs its own hairline should override this token. */
  --color-border-hairline: #f5f5f5;
  --color-border-subtle: var(--color-border-hairline);
  --color-border-strong: var(--outline, #847466);

  /* Actions */
  --color-action-primary: var(--gold, #895200);
  --color-action-on-primary: var(--on-primary, #ffffff);
  --color-action-secondary: var(--color-surface-card);
  --color-action-on-secondary: var(--color-text-primary);
  --color-action-danger: var(--danger, #ba1a1a);
  --color-action-on-danger: var(--on-error, #ffffff);
  --color-action-danger-soft: var(--error-container, #ffdad6);
  /* House "on/active" brown. Anything that reads as switched on — an open
     section chevron, a selected tab or segmented pill, an active chip — uses
     this so the state is one colour everywhere. -soft is its tint, for the
     fill behind an outlined active pill. */
  --color-action-active: #75461d;
  --color-action-on-active: #ffffff;
  --color-action-active-soft: #f1ece6;
  /* Filled selected pills sit on the same brown rather than a second one. */
  --color-action-selected: var(--color-action-active);
  --color-action-on-selected: var(--color-action-on-active);

  /* Status */
  --color-status-success: var(--success, #52a374);
  --color-status-warning: var(--warning, #ed6c02);
  --color-status-info: var(--info, #0288d1);
  --color-status-danger: var(--danger, #ba1a1a);

  /* Paired badge tones. Each pair is a background plus a readable foreground. */
  --tone-neutral-bg: var(--color-surface-muted);
  --tone-neutral-fg: var(--color-text-secondary);
  --tone-brand-bg: var(--primary-fixed, #ffdcbc);
  --tone-brand-fg: var(--on-primary-fixed-variant, #683d00);
  --tone-accent-bg: var(--tertiary-fixed, #c3e8ff);
  --tone-accent-fg: var(--on-tertiary-fixed-variant, #004c68);
  /* Static fallbacks first; the color-mix block below overrides them wherever
     color-mix is supported so the tint always tracks the theme's status hue. */
  --tone-success-bg: #e6f4ec;
  --tone-success-fg: var(--color-status-success);
  --tone-warning-bg: #fdeee0;
  --tone-warning-fg: var(--color-status-warning);
  --tone-danger-bg: var(--color-action-danger-soft);
  --tone-danger-fg: var(--on-error-container, #93000a);
  --tone-royal-bg: #ece8ff;
  --tone-royal-fg: #5b3fd6;

  /* Team role tones. Each role owns a label colour; the pill fill is a tint of
     that same colour so a new role only ever needs one value. Accountant is
     the exception — its cream fill was specified directly. */
  --role-owner-fg: #a41ac0;
  --role-manager-fg: #75461d;
  --role-bookkeeper-fg: #c45b4b;
  --role-accountant-fg: var(--color-status-warning);
  --role-viewer-fg: #0097dd;

  --role-owner-bg: #f6e8fa;
  --role-manager-bg: #f1ece6;
  --role-bookkeeper-bg: #f9ebe9;
  --role-accountant-bg: #fdf5ed;
  --role-viewer-bg: #e5f5fd;
}

@supports (background: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --tone-success-bg: color-mix(in srgb, var(--color-status-success) 16%, transparent);
    --tone-warning-bg: color-mix(in srgb, var(--color-status-warning) 16%, transparent);
    --tone-royal-bg: color-mix(in srgb, var(--tone-royal-fg) 15%, transparent);
    --color-action-active-soft: color-mix(in srgb, var(--color-action-active) 12%, transparent);

    --role-owner-bg: color-mix(in srgb, var(--role-owner-fg) 14%, transparent);
    --role-manager-bg: color-mix(in srgb, var(--role-manager-fg) 14%, transparent);
    --role-bookkeeper-bg: color-mix(in srgb, var(--role-bookkeeper-fg) 14%, transparent);
    --role-viewer-bg: color-mix(in srgb, var(--role-viewer-fg) 14%, transparent);
  }
}

:root {

  /* Focus ring */
  --focus-ring-color: var(--color-action-primary);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Elevation */
  --elevation-card: var(--pf-shadow-elev-1, 0 8px 24px rgba(28, 25, 23, 0.075));
  --elevation-raised: 0 12px 32px rgba(28, 25, 23, 0.12);

  /* Motion */
  --motion-fast: 120ms;
  --motion-default: 180ms;
  --motion-ease: cubic-bezier(0.2, 0, 0.2, 1);
}