/* StrobeDrop design tokens (Flash Pop, dark theme)
   Contrast ratios are against --sd-bg (#1B1B2F) unless noted. */
:root {
  /* Brand palette */
  --sd-coral: #FF5A36;        /* Pop Coral: primary brand color. 5.4:1 on bg */
  --sd-coral-hover: #FF7A5C;  /* 6.6:1 on bg */
  --sd-coral-press: #E8492A;
  --sd-ember: #C2361A;        /* deep coral, for fills under cream text (5.1:1) */
  --sd-flash: #FFC53D;        /* Flash yellow: highlights, focus, stickers. 10.7:1 on bg */
  --sd-midnight: #1B1B2F;     /* Midnight: base background, text on coral/flash */
  --sd-cream: #FFF6E9;        /* Cream: primary text on dark. 15.8:1 on bg */

  /* Dark theme surfaces */
  --sd-bg: var(--sd-midnight);
  --sd-surface: #24243D;      /* cards, panels */
  --sd-surface-2: #2E2E4A;    /* raised: inputs, hover rows */
  --sd-border: #3A3A5C;
  --sd-border-strong: #56567E;

  /* Text */
  --sd-text: var(--sd-cream);
  --sd-text-muted: #C9C4D8;   /* 9.9:1 on bg */
  --sd-text-subtle: #A9A4BD;  /* 7.0:1 on bg, 6.3:1 on surface */
  --sd-text-on-accent: var(--sd-midnight);

  /* Status */
  --sd-success: #6EE7B7;      /* 11.1:1 on bg */
  --sd-warning: var(--sd-flash);
  --sd-danger: #FF8A8A;       /* 7.4:1 on bg */
  --sd-info: #8FB8FF;

  /* Typography */
  --sd-font-sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sd-font-marker: "Permanent Marker", "Bricolage Grotesque", cursive;
  --sd-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  --sd-text-xs: 0.75rem;   /* 12 */
  --sd-text-sm: 0.875rem;  /* 14 */
  --sd-text-md: 1rem;      /* 16 */
  --sd-text-lg: 1.125rem;  /* 18 */
  --sd-text-xl: 1.375rem;  /* 22 */
  --sd-text-2xl: 1.75rem;  /* 28 */
  --sd-text-3xl: 2.5rem;   /* 40 */
  --sd-text-4xl: 3.5rem;   /* 56 */
  --sd-text-5xl: 4.5rem;   /* 72 */

  --sd-weight-regular: 400;
  --sd-weight-semibold: 600;
  --sd-weight-bold: 800;
  --sd-tracking-tight: -0.03em;
  --sd-tracking-caps: 0.16em;

  /* Spacing (4px base) */
  --sd-space-1: 4px;
  --sd-space-2: 8px;
  --sd-space-3: 12px;
  --sd-space-4: 16px;
  --sd-space-5: 24px;
  --sd-space-6: 32px;
  --sd-space-7: 48px;
  --sd-space-8: 64px;
  --sd-space-9: 96px;

  /* Shape */
  --sd-radius-sm: 10px;
  --sd-radius-md: 16px;
  --sd-radius-lg: 28px;
  --sd-radius-pill: 999px;
  --sd-border-width: 3px;

  /* The Flash Pop "sticker" shadow: hard offset, no blur */
  --sd-shadow-pop: 6px 6px 0 var(--sd-coral);
  --sd-shadow-pop-lg: 10px 10px 0 var(--sd-coral);
  --sd-shadow-pop-flash: 6px 6px 0 var(--sd-flash);

  --sd-focus-ring: 0 0 0 3px var(--sd-bg), 0 0 0 6px var(--sd-flash);
  --sd-ease: cubic-bezier(.3, .7, .4, 1);
  --sd-max-width: 1200px;
}