/* ============================================================
   DESIGN TOKENS — FreshZone
   ------------------------------------------------------------
   Load this BEFORE style.css on every page as the foundational
   design token layer. style.css overrides conflicting names
   so the existing visual design is preserved.
   ============================================================ */

:root {
  /* Brand (10% accent) — matches FreshZone blue/teal palette */
  --color-brand:       hsl(191, 100%, 42%);   /* #00b4d8 — teal accent */
  --color-brand-light: hsl(191, 80%, 92%);   /* light teal tint */
  --color-brand-dark:  hsl(202, 100%, 24%);  /* #004e7a — dark navy */

  /* Surfaces (60% canvas, 30% secondary) */
  --color-canvas:   hsl(200, 45%, 95%);      /* light blue-gray page bg */
  --color-surface:  hsl(0, 0%, 100%);        /* white cards */
  --color-overlay:  hsl(200, 25%, 96%);      /* sidebar, input bg */

  /* Text */
  --color-text-primary:   hsl(202, 100%, 14%);  /* near-black navy */
  --color-text-secondary: hsl(200, 15%, 40%);   /* muted gray-blue */
  --color-text-muted:     hsl(200, 10%, 60%);   /* very muted */

  /* Borders (must be at least 10% darker than background) */
  --color-border:        hsl(200, 20%, 85%);    /* visible against white */
  --color-border-strong: hsl(200, 20%, 70%);    /* hover / emphasis */

  /* Semantic (use sparingly — 3 max) */
  --color-success: hsl(152, 60%, 40%);
  --color-danger:  hsl(0,   72%, 50%);
  --color-warning: hsl(38,  92%, 50%);

  /* Shadows (subtle only — never rgba > 0.3) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 6px rgba(0,0,0,0.07), 0 2px 12px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.20);

  /* Border radius scale */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition-base: 180ms ease;
  --transition-slow: 320ms ease;

  /* Type scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  40px;

  /* Spacing scale (4px grid) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
}

/* Global base transitions — policy section 10.
   style.css and polish.css already define more specific
   transitions. This is a foundation layer that gets overridden. */
button,
a,
[role="button"],
input,
select,
textarea {
  transition:
    color            var(--transition-fast),
    background-color var(--transition-fast),
    border-color     var(--transition-fast);
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}