/* =========================================================
   Soft UI design tokens — pastel honey · mint · rose
   Keep the legacy variable names used across the app.
   ========================================================= */
:root{
  color-scheme: light;

  /* Canvas */
  --bg: #FAF7F1;
  --bg-2: #FFFDF9;
  --surface: #FFFFFF;
  --surface-2: #FFFCF6;

  /* Honey (primary) */
  --honey: #F2D9A6;
  --honey-strong: #E9C783;
  --honey-deep: #D9B266;
  --honey-soft: #FBF1DC;
  --honey-ink: #4A3512;

  /* Mint (secondary / copy & share) */
  --mint: #D9F3E9;
  --mint-strong: #BFE9DA;
  --mint-deep: #8FD8C3;
  --mint-soft: #EDFAF5;
  --mint-ink: #0C5445;

  /* Rose (stop / reject) */
  --rose: #FFE2E8;
  --rose-strong: #FFC9D4;
  --rose-deep: #F5A9B8;
  --rose-soft: #FFF3F5;
  --rose-ink: #8C2238;

  /* Extra pastel accents */
  --sky: #E3F0FA;
  --sky-ink: #245A73;
  --lilac: #EFE8FA;
  --lilac-ink: #5B4A7A;

  /* Text */
  --ink: #1F2A2E;
  --ink-2: #34464B;
  --muted: #5F7378;
  --muted-2: #7C8F93;

  /* Lines & glass */
  --line: rgba(31, 42, 46, .08);
  --line-strong: rgba(31, 42, 46, .14);
  --white-ring: rgba(255, 255, 255, .85);
  --glass: rgba(255, 255, 255, .72);

  /* Legacy aliases (used by markup / JS / older rules) */
  --teal: #1F6F63;
  --teal-deep: #17564D;
  --gold: var(--honey-strong);
  --cream: var(--honey-soft);
  --coral: var(--rose-ink);
  --slate: var(--muted);
  --on-gold: var(--honey-ink);
  --brand: var(--honey-strong);
  --brand-2: var(--honey-deep);
  --accent: var(--teal);
  --hero-from: #FBF1DC;
  --hero-to: #E7F7F1;
  --ok: var(--mint-ink);
  --bad: var(--rose-ink);

  /* Shape */
  --radius-xs: 12px;
  --radius-sm: 16px;
  --radius: 22px;
  --radius-lg: 30px;
  --radius-xl: 36px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(31, 42, 46, .05);
  --shadow-soft: 0 2px 6px rgba(31, 42, 46, .04), 0 18px 40px -28px rgba(31, 42, 46, .22);
  --shadow: 0 2px 8px rgba(31, 42, 46, .04), 0 28px 64px -36px rgba(31, 42, 46, .26);
  --shadow-float: 0 6px 14px rgba(31, 42, 46, .06), 0 34px 80px -38px rgba(31, 42, 46, .3);

  /* Type */
  --font: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Tajawal", "Cairo", system-ui, -apple-system, sans-serif;
}