/**
 * Atoms design tokens — sourced from atoms-platform/packages/platform
 * (globals.css + colors.css). Plain CSS vars for the static deck form.
 */

:root {
  /* Teal primitives (Figma) */
  --teal-0: #f2fbf9;
  --teal-50: #d1f7ef;
  --teal-100: #a2e0d4;
  --teal-200: #59cdb3;
  --teal-300: #16b09a;
  --teal-400: #0d8a80;
  --teal-500: #0b6b64;

  /* Semantic palette */
  --background: #ffffff;
  --foreground: #0a0a0a;
  --fg-primary: #0a0a0a;
  --fg-secondary: #737373;
  --fg-tertiary: #a1a1a1;
  --tertiary: #a1a1a1;

  --primary-0: #f2fbf9;
  --primary-50: #e6f7f4;
  --primary-100: #c0ece4;
  --primary-200: #99e0d3;
  --primary-300: #66cdba;
  --primary-400: #33b8a0;
  --primary-500: #009684;
  --primary-600: #007a6b;
  --primary-700: #005e52;
  --primary-foreground: #fafafa;

  --primary-gradient-deg: 260deg;
  --primary-gradient: linear-gradient(
    var(--primary-gradient-deg),
    var(--primary-300) -4.95%,
    var(--primary-500) 99.52%
  );
  --primary-gradient-hover: linear-gradient(
    var(--primary-gradient-deg),
    var(--primary-400) -4.95%,
    var(--primary-600) 99.52%
  );

  --card: #ffffff;
  --card-foreground: var(--fg-primary);
  --card-outline: #f5f5f5;

  --muted: #f5f5f4;
  --muted-foreground: #7c7c7c;
  --secondary: #f5f5f5;
  --secondary-foreground: #7c7c7c;

  --border: #f5f5f5;
  --input: #f5f5f5;
  --input-group: #fafafa;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --destructive: #ef4444;
  --ring: var(--primary-500);

  --success-bg: hsl(143, 85%, 96%);
  --success-border: hsl(145, 92%, 87%);
  --success-text: hsl(140, 100%, 27%);

  --error-bg: hsl(359, 100%, 97%);
  --error-border: hsl(359, 100%, 94%);
  --error-text: hsl(360, 100%, 45%);

  --radius: 0.75rem;
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --shadow-card: 0 1px 2px rgba(10, 10, 10, 0.04), 0 0 0 1px rgba(10, 10, 10, 0.06);
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}