/* OpenCluster v1.0 - authoritative palette; default theme is dark.
   Set data-oc-theme="dark|medium|light" on the document root. */
:root {
  --oc-brand-petrol: #061A21;
  --oc-brand-teal: #37CABB;
  --oc-brand-teal-deep: #087D70;
  --oc-brand-platinum: #D8C4A8;
  --oc-brand-platinum-highlight: #F4E6D2;
  --oc-brand-platinum-shadow: #A99175;
  --oc-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --oc-metal-gradient: linear-gradient(135deg, #F4E6D2 0%, #D8C4A8 52%, #A99175 100%);
}
:root,
[data-oc-theme="dark"] {
  color-scheme: dark;
  --oc-bg: #061A21;
  --oc-surface: #102B33;
  --oc-surface-raised: #193B43;
  --oc-text: #F4E6D2;
  --oc-text-muted: #A8BCBF;
  --oc-action: #37CABB;
  --oc-action-text: #061A21;
  --oc-border: #42666E;
  --oc-focus: #37CABB;
  --oc-success: #77D9AE;
  --oc-warning: #F2C879;
  --oc-error: #FF9D9D;
}
[data-oc-theme="medium"] {
  color-scheme: dark;
  --oc-bg: #18343D;
  --oc-surface: #244650;
  --oc-surface-raised: #30545E;
  --oc-text: #F4E6D2;
  --oc-text-muted: #C0D0D2;
  --oc-action: #37CABB;
  --oc-action-text: #061A21;
  --oc-border: #78979E;
  --oc-focus: #37CABB;
  --oc-success: #77D9AE;
  --oc-warning: #F2C879;
  --oc-error: #FF9D9D;
}
[data-oc-theme="light"] {
  color-scheme: light;
  --oc-bg: #F5F5F2;
  --oc-surface: #FFFFFF;
  --oc-surface-raised: #E8EFED;
  --oc-text: #101820;
  --oc-text-muted: #526B70;
  --oc-action: #087D70;
  --oc-action-text: #FFFFFF;
  --oc-border: #7A9296;
  --oc-focus: #087D70;
  --oc-success: #176B4D;
  --oc-warning: #7A4B00;
  --oc-error: #B42318;
}

/* Opt-in examples: apply these classes explicitly. */
.oc-surface { background: var(--oc-surface); color: var(--oc-text); }
.oc-button-primary {
  font: 600 1rem/1.5 var(--oc-font-sans);
  background: var(--oc-action); color: var(--oc-action-text);
  border: 1px solid var(--oc-action); border-radius: 0.5rem;
  padding: 0.625rem 1rem; cursor: pointer;
}
.oc-link { color: var(--oc-action); text-decoration: underline; text-underline-offset: 0.15em; }
.oc-control { background: var(--oc-surface); color: var(--oc-text); border: 1px solid var(--oc-border); }
.oc-button-primary:focus-visible, .oc-link:focus-visible, .oc-control:focus-visible {
  outline: 3px solid var(--oc-focus); outline-offset: 3px;
}
/* Do not apply opacity to text or token colours without checking contrast again. */