/* =========================================================
   Elovarra — status page design tokens.

   ⚠️ This file is SERVED TO THE PUBLIC INTERNET. Keep it to
   colours. No architecture, no tooling, no business detail —
   see README.md (not published) for how it is maintained.

   A managed subset of the shared palette. Do not hand-edit:
   changes are checked automatically and will fail CI.
   ========================================================= */

:root {
  /* Backgrounds */
  --salon-bg:               #0e1512;
  --salon-card:             #161e1a;
  --salon-surface:          #1e2822;

  /* Borders */
  --salon-border:           #2c3c32;

  /* Text */
  --salon-text:             #e6ede8;
  --salon-muted:            #8aaa90;
  --salon-text-inverse:     #ffffff;

  /* Brand accent */
  --salon-accent:           #6bbc3b;
  --salon-accent-deep:      color-mix(in srgb, var(--salon-accent) 80%, black);

  /* Semantic / status */
  --salon-success:          #34c7a4;
  --salon-warning:          #e5a63c;
  --salon-danger:           #e05c68;
  --salon-info:             #5a9fd6;

  /* Accent tints */
  --salon-accent-glow:       color-mix(in srgb, var(--salon-accent) 30%, transparent);
  --salon-accent-tint:       color-mix(in srgb, var(--salon-accent) 10%, transparent);
  --salon-accent-border:     color-mix(in srgb, var(--salon-accent) 25%, transparent);
  --salon-focus-ring:        0 0 0 3px color-mix(in srgb, var(--salon-accent) 15%, transparent);

  /* Semantic tints */
  --salon-success-tint:      rgba(52, 199, 164, 0.12);
  --salon-warning-tint:      rgba(229, 166, 60, 0.12);
  --salon-danger-tint:       rgba(224, 92, 104, 0.08);
  --salon-info-tint:         rgba(90, 159, 214, 0.12);
}

@media (prefers-color-scheme: light) {
  :root {
    --salon-bg:             #f5f8f6;
    --salon-card:           #ffffff;
    --salon-surface:        #edf3ef;
    --salon-border:         #d4e3d8;
    --salon-text:           #1a2e22;
    --salon-muted:          #5a7460;
    --salon-accent:         #477c27;
    --salon-accent-glow:    color-mix(in srgb, var(--salon-accent) 25%, transparent);
    --salon-accent-tint:    color-mix(in srgb, var(--salon-accent) 8%, transparent);
    --salon-accent-border:  color-mix(in srgb, var(--salon-accent) 30%, transparent);
    --salon-focus-ring:     0 0 0 3px color-mix(in srgb, var(--salon-accent) 12%, transparent);
    --salon-danger-tint:    rgba(224, 92, 104, 0.06);
  }
}