/* Dokima.AI — Spacing, radius, shadow tokens */

:root {
  /* Spacing scale (4px base) */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-24: 6rem;     /* 96 */

  /* Radius — TWO LAYERS.
     Marketing layer (cards, hero, sections) reads soft & generous.
     Product layer (in-app/extension surfaces) reads tight, matching the real app. */
  --radius: 0.625rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.125rem;
  --radius-3xl: 1.375rem;
  --radius-full: 9999px;
  /* Semantic */
  --radius-card: 1rem;        /* marketing surface card */
  --radius-app: 0.5625rem;    /* in-product card (tight, ~9px) */
  --radius-app-sm: 0.375rem;  /* in-product badge / track */
  --radius-pill: 9999px;      /* nav, chips, clock pills */

  /* Shadows — soft, warm-brown tint, low contrast on cream */
  --shadow-xs: 0 1px 2px rgba(58, 38, 20, 0.05);
  --shadow-sm: 0 1px 3px rgba(58, 38, 20, 0.07), 0 1px 2px rgba(58, 38, 20, 0.04);
  --shadow-md: 0 6px 18px -8px rgba(58, 38, 20, 0.16);
  --shadow-lg: 0 24px 60px -24px rgba(58, 38, 20, 0.18);
  /* Product widget lift */
  --shadow-widget: 0 34px 72px -34px rgba(58, 38, 20, 0.42);
  /* Branded orange glow — used on focused inputs & hovered scoring cards */
  --shadow-glow: 0 0 30px -5px rgba(255, 90, 9, 0.25);
  --shadow-glow-soft: 0 0 30px rgba(255, 90, 9, 0.12), 0 0 60px rgba(255, 90, 9, 0.06);
}