/*
 * Design tokens for the Azmy Pharmacy storefront.
 * One place for colour, spacing, shape, type and icon rules. New and changed styles should use these
 * variables instead of repeating hex values. Contrast figures are against white (WCAG: 4.5:1 for text,
 * 3:1 for borders and icons). Existing variables in base.css are unchanged for now.
 */
:root {
  /* Brand */
  --color-primary: #087f70;          /* 4.9:1 on white; white text on it 4.9:1 */
  --color-primary-hover: #066b5f;    /* white text on it 6.4:1 */
  --color-primary-pressed: #055a50;  /* white text on it 8.1:1 */
  --color-primary-soft: #f1f8f6;
  --color-text-on-primary: #ffffff;

  /* Text */
  --color-text: #172b2a;             /* 14.8:1 */
  --color-text-secondary: #61726e;   /* 5.1:1 */

  /* Surfaces and lines */
  --color-surface: #ffffff;
  --color-surface-soft: #f1f8f6;
  --color-divider: #dfe8e4;          /* decorative lines only; too light for input borders */
  --color-border-strong: #7d8f8a;    /* 3.4:1: borders of inputs, cards you can select, icon buttons */

  /* Status. Text colours are at least 5:1 on white and on their soft background. */
  --color-success: #17703f;
  --color-success-soft: #e8f5ec;
  --color-warning: #8a5300;
  --color-warning-soft: #fff4dc;
  --color-danger: #b00020;
  --color-danger-soft: #fdecee;
  --color-info: #0b5cad;
  --color-info-soft: #e8f1fb;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Shape */
  --radius-sm: 8px;                  /* inputs and chips */
  --radius-md: 12px;                 /* cards and buttons */
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(23, 43, 42, 0.08);
  --shadow-2: 0 8px 24px rgba(23, 43, 42, 0.12);

  /* Type scale */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 28px;
  --font-size-2xl: 36px;

  /* Size rules */
  --tap-min: 44px;                   /* smallest touch target (Apple Human Interface Guidelines) */
  --icon-stroke: 1.75;               /* line weight of every icon, close to body-text weight */

  /* Native controls (checkboxes, radios) follow the brand colour, not the system blue. */
  accent-color: var(--color-primary);
}

/* Icons: see icons.js. They draw in the current text colour. */
.ui-icon {
  flex: none;
  stroke-width: var(--icon-stroke);
  vertical-align: -0.2em;
}

/* A filled icon, for example a saved favourite. */
.ui-icon-filled {
  fill: currentColor;
}

/* Icons that point a direction are mirrored in right-to-left pages (Arabic). */
[dir="rtl"] .ui-icon-flip {
  transform: scaleX(-1);
}

/* Keyboard focus is always visible and uses the brand colour (4.9:1 on white). */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}