/* Design tokens live under theme classes (.theme-dark / .theme-light). No utility classes here. */

/* Shared, non-color tokens */
:root {
  /* Typography */
  --pfse-font-sans: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  --pfse-font-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --pfse-font-greek: "EB Garamond", Georgia, "Times New Roman", serif;
  --pfse-font-size-h1: 21px;
  --pfse-font-size-h2: 18px;
  --pfse-font-size-h3: 16px;
  --pfse-font-size-body: 14px;
  --pfse-line-height-body: 1.45;

  /* Radii */
  --pfse-radius-sm: 4px;
  --pfse-radius-md: 6px;
  --pfse-radius-lg: 10px;

  /* Spacing (8px rhythm) */
  --pfse-spacing-1: 4px;
  --pfse-spacing-2: 8px;
  --pfse-spacing-3: 12px;
  --pfse-spacing-4: 16px;
  --pfse-spacing-5: 24px;
  --pfse-spacing-6: 32px;

  /* Controls */
  --pfse-control-height-sm: 32px;
  --pfse-control-height-md: 36px;
  --pfse-control-height-lg: 40px;

  /* Z-index map */
  --pfse-z-base: 0;
  --pfse-z-raised-1: 1;
  --pfse-z-raised-2: 2;
  --pfse-z-overlay: 20;
  --pfse-z-toast: 30;

  /* Misc */
  --pfse-panel-width-left: 30vw;
  --pfse-panel-width-right: 70vw;
  /* Animation durations */
  --pfse-anim-instant: 40ms;
  --pfse-anim-micro: 100ms;
  --pfse-anim-swift: 160ms;
  --pfse-anim-standard: 240ms;
  --pfse-anim-deliberate: 375ms;
  --pfse-anim-extended: 600ms;

  /* Animation easing */
  --pfse-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --pfse-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --pfse-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --pfse-ease-linear: linear;

  /* State/feedback */
  --pfse-active-scale: 0.98;
  --pfse-selection-bg: #E6E9EE;
  --pfse-error-shake-distance: 8px;

  /* Organism microinteractions */
  --pfse-toast-slide-duration: 160ms;
  --pfse-modal-backdrop-fade: 375ms;
  --pfse-input-flash-bg: #FFF9C4;
  --pfse-validation-pulse: 160ms;
}

/* Dark Theme Variables */
.theme-dark {
  --pfse-bg: #0B0D10;
  --pfse-surface-primary: #111418;
  --pfse-surface-secondary: #161A20;
  --pfse-border-primary: #222831;
  --pfse-border-secondary: #2A313B;
  --pfse-text-high: #E6E9EE;
  --pfse-text-muted: #A8B0BD;
  --pfse-accent-primary: #3DA9FF;
  --pfse-accent-secondary: #FF8A3D;
  --pfse-success: #2EA043;
  --pfse-warning: #F5A524;
  --pfse-danger: #FF5A5F;
  --pfse-overlay-scrim: rgba(0,0,0,0.60);
  --pfse-focus-ring-width: 2px;
  --pfse-focus-ring-color: #3DA9FF;
  --pfse-focus-ring: var(--pfse-focus-ring-width) solid var(--pfse-focus-ring-color);
  /* Activation highlight tones */
  --pfse-activation-nonzero-bg: color-mix(in srgb, var(--pfse-warning) 22%, var(--pfse-surface-secondary) 78%);
  --pfse-activation-focus-bg: color-mix(in srgb, var(--pfse-success) 22%, var(--pfse-surface-secondary) 78%);
}

/* Light Theme Variables */
.theme-light {
  --pfse-bg: #F7F9FC;
  --pfse-surface-primary: #FFFFFF;
  --pfse-surface-secondary: #F0F4F8;
  --pfse-border-primary: #D1D9E2;
  --pfse-border-secondary: #C2CBD6;
  --pfse-text-high: #13181F;
  --pfse-text-muted: #5E6A75;
  --pfse-accent-primary: #006DCC;
  --pfse-accent-secondary: #CC5E00;
  --pfse-success: #2F8F41;
  --pfse-warning: #F5A524;
  --pfse-danger: #D92D3A;
  --pfse-overlay-scrim: rgba(0,0,0,0.35);
  --pfse-focus-ring-width: 2px;
  --pfse-focus-ring-color: #006DCC;
  --pfse-focus-ring: var(--pfse-focus-ring-width) solid var(--pfse-focus-ring-color);
  /* Activation highlight tones */
  --pfse-activation-nonzero-bg: color-mix(in srgb, var(--pfse-warning) 26%, var(--pfse-surface-secondary) 74%);
  --pfse-activation-focus-bg: color-mix(in srgb, var(--pfse-success) 24%, var(--pfse-surface-secondary) 76%);
}