/* =========================================================
   TOE BEANS DESIGN SYSTEM
   THEME / DESIGN TOKENS

   Canonical Toe Beans design tokens.
   Production pages should use these variables.
   ========================================================= */

:root {

  color-scheme: light;

  /* Brand */
  --ds-primary: #176b68;
  --ds-primary-dark: #104e4c;
  --ds-primary-accent: #176b68;
  --ds-primary-soft: #dcefed;
  --ds-secondary: #a8c7b8;
  --ds-accent: #f28c72;

  /* Surfaces */
  --ds-background: #f8f6f0;
  --ds-surface: #ffffff;
  --ds-surface-alt: #edf3ef;
  --ds-surface-soft: #f4f7f4;

  /* Text */
  --ds-text: #263332;
  --ds-heading: #17312f;
  --ds-muted: #697776;

  /* Borders */
  --ds-border: #d8e1d9;
  --ds-border-strong: #c3d0c7;

  /* Status */
  --ds-success: #347a4f;
  --ds-success-dark: #285f3d;
  --ds-success-soft: #e2f2e7;

  --ds-warning: #8a6824;
  --ds-warning-soft: #f7eed5;

  --ds-danger: #9a403b;
  --ds-danger-dark: #77302d;
  --ds-danger-soft: #fae7e5;

  --ds-info: #426b83;
  --ds-info-soft: #e3eef4;

  /* Solid fill + white text (buttons, badges, icon dots).
     Fixed across themes — unlike --ds-success/--ds-danger, which
     brighten in dark mode for text-on-dark-surface contrast. */
  --ds-success-solid: #347a4f;
  --ds-success-solid-dark: #285f3d;
  --ds-danger-solid: #9a403b;
  --ds-danger-solid-dark: #77302d;

  --ds-on-primary: #ffffff;

  /* Radius */
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 20px;
  --ds-radius-pill: 999px;

  /* Shadows */
  --ds-shadow-sm:
    0 4px 12px rgba(16, 40, 38, 0.07);

  --ds-shadow-md:
    0 12px 28px rgba(16, 40, 38, 0.10);

  --ds-shadow-lg:
    0 24px 60px rgba(0, 0, 0, 0.20);

  /* Spacing */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 32px;
  --ds-space-8: 40px;
  --ds-space-9: 48px;

  /* Widths */
  --ds-content-width: 1200px;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-mode="dark"] {

  color-scheme: dark;
  --ds-primary: #176b68;
  --ds-primary-accent: #78d1ca;
  --ds-primary-soft: #203f3b;

  --ds-success: #74ce93;
  --ds-success-dark: #a9e8bd;
  --ds-success-soft: #203b2b;

  --ds-warning: #e5bd64;
  --ds-warning-soft: #423619;

  --ds-danger: #f1948e;
  --ds-danger-dark: #ffc0bb;
  --ds-danger-soft: #472725;

  --ds-info: #8bc5e4;
  --ds-info-soft: #203947;

  --ds-background: #132321;
  --ds-surface: #1b2d2a;
  --ds-surface-alt: #223733;
  --ds-surface-soft: #1d312e;

  --ds-text: #edf4f1;
  --ds-heading: #ffffff;
  --ds-muted: #adbfba;

  --ds-border: #36504b;
  --ds-border-strong: #48635d;

}