/*
 * Circles design tokens.
 * Keep in sync with circles_theme.dart (Flutter parity).
 * Palette: warm neutral "stone" grays + a calm teal accent.
 * Intentionally distinct from the fable project (no indigo/violet).
 */

:root,
[data-theme="light"] {
  /* Brand / accent */
  --accent-50: #effbf8;
  --accent-100: #d6f4ec;
  --accent-200: #aee9da;
  --accent-300: #79d6c2;
  --accent-400: #43bca5;
  --accent-500: #1fa18b;
  --accent-600: #138072;
  --accent-700: #11665d;
  --accent-800: #11514b;
  --accent-900: #11433f;

  --color-primary: var(--accent-600);
  --color-primary-hover: var(--accent-700);
  --color-primary-soft: var(--accent-100);
  --color-on-primary: #ffffff;

  --color-danger: #c0392b;
  --color-danger-soft: #fbe7e4;
  --color-success: #1f8a55;
  --color-success-soft: #e3f4ea;
  --color-warning: #b7791f;
  --color-warning-soft: #f8efda;

  /* Surfaces (warm neutral) */
  --bg-base: #f6f5f2;
  --bg-surface: #ffffff;
  --bg-elevated: #f1efea;
  --bg-sunken: #ece9e3;
  --bg-input: #ffffff;
  --bg-hover: #f4f2ee;
  --overlay: rgba(33, 30, 25, 0.42);

  /* Text */
  --text-primary: #21201c;
  --text-secondary: #6b675f;
  --text-muted: #98938a;
  --text-on-accent: #ffffff;

  /* Borders */
  --border: #e4e0d8;
  --border-strong: #d2cdc2;
  --ring: rgba(19, 128, 114, 0.28);

  /* Diagram */
  --diagram-bg: #f1efea;
  --connection-line: rgba(19, 128, 114, 0.30);
  --clone-line: rgba(152, 147, 138, 0.45);
  --spoke-line: #cfc9bd;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(33, 30, 25, 0.06);
  --shadow-sm: 0 1px 3px rgba(33, 30, 25, 0.08), 0 1px 2px rgba(33, 30, 25, 0.04);
  --shadow-md: 0 6px 16px rgba(33, 30, 25, 0.10), 0 2px 6px rgba(33, 30, 25, 0.06);
  --shadow-lg: 0 18px 40px rgba(33, 30, 25, 0.16), 0 6px 14px rgba(33, 30, 25, 0.08);

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Spacing scale */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 14px;
  --space-lg: 22px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-md: 0.95rem;
  --fs-lg: 1.1rem;
  --fs-xl: 1.35rem;
  --fs-2xl: 1.7rem;

  /* Layout */
  --sidebar-width: 248px;
  --topbar-height: 60px;
  --bottom-nav-height: 62px;
  --content-max: 920px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.14s;
  --dur: 0.22s;

  color-scheme: light;
}

[data-theme="dark"] {
  --accent-50: #11433f;
  --accent-100: #11514b;
  --accent-200: #11665d;
  --accent-300: #138072;
  --accent-400: #1fa18b;
  --accent-500: #43bca5;
  --accent-600: #79d6c2;
  --accent-700: #aee9da;
  --accent-800: #d6f4ec;
  --accent-900: #effbf8;

  --color-primary: var(--accent-400);
  --color-primary-hover: var(--accent-500);
  --color-primary-soft: rgba(31, 161, 139, 0.16);
  --color-on-primary: #0c1b19;

  --color-danger: #e8675a;
  --color-danger-soft: rgba(232, 103, 90, 0.16);
  --color-success: #4cc488;
  --color-success-soft: rgba(76, 196, 136, 0.16);
  --color-warning: #e0a64b;
  --color-warning-soft: rgba(224, 166, 75, 0.16);

  --bg-base: #16161a;
  --bg-surface: #1e1e23;
  --bg-elevated: #26262d;
  --bg-sunken: #121216;
  --bg-input: #26262d;
  --bg-hover: #2c2c34;
  --overlay: rgba(0, 0, 0, 0.62);

  --text-primary: #f0eee9;
  --text-secondary: #a8a49b;
  --text-muted: #76736c;
  --text-on-accent: #0c1b19;

  --border: #323239;
  --border-strong: #44444d;
  --ring: rgba(31, 161, 139, 0.40);

  --diagram-bg: #131318;
  --connection-line: rgba(67, 188, 165, 0.40);
  --clone-line: rgba(118, 115, 108, 0.55);
  --spoke-line: #3a3a42;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent-50: #11433f;
    --accent-100: #11514b;
    --accent-200: #11665d;
    --accent-300: #138072;
    --accent-400: #1fa18b;
    --accent-500: #43bca5;
    --accent-600: #79d6c2;
    --accent-700: #aee9da;

    --color-primary: var(--accent-400);
    --color-primary-hover: var(--accent-500);
    --color-primary-soft: rgba(31, 161, 139, 0.16);
    --color-on-primary: #0c1b19;

    --color-danger: #e8675a;
    --color-danger-soft: rgba(232, 103, 90, 0.16);
    --color-success: #4cc488;
    --color-success-soft: rgba(76, 196, 136, 0.16);
    --color-warning: #e0a64b;
    --color-warning-soft: rgba(224, 166, 75, 0.16);

    --bg-base: #16161a;
    --bg-surface: #1e1e23;
    --bg-elevated: #26262d;
    --bg-sunken: #121216;
    --bg-input: #26262d;
    --bg-hover: #2c2c34;
    --overlay: rgba(0, 0, 0, 0.62);

    --text-primary: #f0eee9;
    --text-secondary: #a8a49b;
    --text-muted: #76736c;
    --text-on-accent: #0c1b19;

    --border: #323239;
    --border-strong: #44444d;
    --ring: rgba(31, 161, 139, 0.40);

    --diagram-bg: #131318;
    --connection-line: rgba(67, 188, 165, 0.40);
    --clone-line: rgba(118, 115, 108, 0.55);
    --spoke-line: #3a3a42;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
  }
}