/* Pinglo design tokens — see /DESIGN.md for the full contract.
   Palette is sampled from the logo: blue #0872EB, green #14B067. Light tints only — no dark surfaces. */
:root {
  /* Brand (from logo) */
  --blue: #0872EB;
  --blue-deep: #0A62CF;          /* hover + small text on tinted surfaces */
  --green: #14B067;
  --green-text: #0B7F49;         /* small green text on light surfaces (AA) */

  /* Light tints */
  --blue-50: #F3F8FF;
  --blue-100: #E4F0FF;
  --blue-200: #C9E1FF;
  --blue-soft: rgba(8, 114, 235, 0.10);
  --green-50: #EBF9F2;
  --green-100: #D5F3E4;
  --green-soft: rgba(20, 176, 103, 0.12);

  /* Surfaces */
  --white: #FFFFFF;
  --surface: #FFFFFF;
  --surface-tint: var(--blue-50);
  --border: #DCE8F7;
  --border-strong: #C4D8F0;

  /* Text — soft slate, lighter than the logo's charcoal wordmark */
  --text: #43506A;
  --muted: #64708A;

  --danger: #E5484D;

  --gradient-brand: linear-gradient(135deg, #0872EB 0%, #14B067 100%);
  --gradient-brand-soft: linear-gradient(135deg, #E4F0FF 0%, #EBF9F2 100%);

  /* Type */
  --font-display: "Space Grotesk", "Noto Sans JP", system-ui, sans-serif;
  --font-body: "Inter", "Noto Sans JP", system-ui, sans-serif;
  --font-jp: "Noto Sans JP", var(--font-body);
  --font-arabic: "Tajawal", "Noto Sans JP", system-ui, sans-serif;

  /* Spacing */
  --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; --space-16: 64px; --space-24: 96px; --space-32: 128px;

  --section-y: 128px;
  --section-y-tablet: 96px;
  --section-y-phone: 64px;
  --container-max: 1280px;
  --gutter: 48px;
  --gutter-phone: 20px;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 28px rgba(8, 114, 235, 0.08);
  --shadow-raised: 0 22px 56px rgba(8, 114, 235, 0.16);
  --shadow-glow-blue: 0 12px 32px rgba(8, 114, 235, 0.28);
  --shadow-glow-green: 0 0 20px rgba(20, 176, 103, 0.40);

  --ease-standard: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-enter: 220ms;
  --motion-exit: 150ms;
}

html[dir="rtl"] {
  --font-display: var(--font-arabic);
  --font-body: var(--font-arabic);
}