/* Kanelo design tokens — surfaces, text, accent (system), spacing */
:root {
  /* surfaces */
  --surfacePage: #F4F5F7;
  --surfaceCard: #FFFFFF;
  --surfaceSunken: #EDEEF1;

  /* text */
  --textPrimary: #14161A;
  --textSecondary: #5B616B;
  --textMuted: #8A9099;
  --textOnAccent: #FFFFFF;

  /* borders */
  --borderHairline: rgba(20, 22, 26, 0.10);
  --borderStrong: rgba(20, 22, 26, 0.18);

  /* system action / shift bar — Kanelo deep blue (icon) */
  --accent: #272A3D;
  --accentHover: #35384F;
  --accentTint: rgba(39, 42, 61, 0.12);
  --danger: #C13A38;
  --shiftAmber: #C07A0E;

  /* radii */
  --radiusCard: 12px;
  --radiusScreen: 16px;
  --radiusPill: 999px;

  /* spacing (4px grid) */
  --space1: 4px;
  --space2: 8px;
  --space3: 12px;
  --space4: 16px;
  --space5: 20px;
  --space6: 24px;

  /* typography — weights 400 / 500 only */
  --fontLabel: 11px;
  --fontBody: 13px;
  --fontBodyLarge: 15px;
  --fontValue: 22px;
  --fontValueHero: 27px;
  --fontValueAllDay: 34px;
  --weightRegular: 400;
  --weightMedium: 500;

  /* shift chrome */
  --shiftBarWidth: 6px;
  --shiftUnderlineHeight: 4px;
}