/* Dark Theme - Component Tokens */
:root {
  /* Component colors - Base */
  --component-colours-color-fg-accent-primary: #fa0396;
  --component-colours-color-bg-neutral: #69609f33;
  --component-colours-color-fg-accent-secondary: #19fdf7;
  --component-colours-color-bg-accent-primary: #fa03961a;
  --component-colours-color-bg-accent-secondary: #19fdf70d;

  /* Interactive states */
  --component-colours-color-fg-interactive: #c3baf7;
  --component-colours-color-bg-interactive: #736c930d;
  --component-colours-color-border-interactive: #ac99ff80;
  --component-colours-color-fg-interactive-hover: #d7d1fa;
  --component-colours-color-bg-interactive-hover: #6c609f1a;
  --component-colours-color-border-interactive-hover: #ac99ffb3;

  /* Success states */
  --component-colours-color-fg-success: #00cc81;
  --component-colours-color-bg-success: #00cc811a;
  --component-colours-color-border-success: #00cc8133;
  --component-colours-color-fg-success-hover: #00cc81;
  --component-colours-color-bg-success-hover: #00cc8126;
  --component-colours-color-border-success-hover: #00cc8140;

  /* Danger states */
  --component-colours-color-fg-danger: #e40261;
  --component-colours-color-bg-danger: #e402611a;
  --component-colours-color-border-danger: #e4026133;
  --component-colours-color-fg-danger-hover: #ca0256;
  --component-colours-color-bg-danger-hover: #e4026126;
  --component-colours-color-border-danger-hover: #e4026140;

  /* Attention states (Figma Orange palette) */
  --component-colours-color-fg-attention: #ed8936;
  --component-colours-color-bg-attention: #ed89361a;
  --component-colours-color-border-attention: #ed893633;
  --component-colours-color-fg-attention-hover: #f6ad55;
  --component-colours-color-bg-attention-hover: #ed893626;
  --component-colours-color-border-attention-hover: #ed893640;

  /* Warning states */
  --component-colours-color-fg-warning: #ff9500;
  --component-colours-color-bg-warning: #ff95001a;
  --component-colours-color-border-warning: #ff950033;
  --component-colours-color-fg-warning-hover: #ff9500;
  --component-colours-color-bg-warning-hover: #ff950026;
  --component-colours-color-border-warning-hover: #ff950040;

  /* Warning pending (solid cream bg + brown border for pending_input / banner) */
  --component-colours-color-bg-warning-pending: #ffeed6;
  --component-colours-color-border-warning-pending: #b87800;

  /* Info states */
  --component-colours-color-fg-info: #60a5fa;
  --component-colours-color-bg-info: #60a5fa1a;
  --component-colours-color-border-info: #60a5fa33;

  /* Purple states */
  --component-colours-color-fg-purple: #c084fc;
  --component-colours-color-bg-purple: #c084fc1a;
  --component-colours-color-border-purple: #c084fc33;
}
