/* Your style in one place. Change the tokens and every experiment follows.
   Source: the [AI] Library in Figma (Primitives and Semantic collections). */

:root {
  /* Primitives: palety 0 (jasny) → 10 (ciemny), jak w Figmie */
  --color-green-0: #FFFFFF;
  --color-green-1: #CEF7E0;
  --color-green-2: #9CF0C2;
  --color-green-3: #6BE8A3;
  --color-green-4: #39E185;
  --color-green-5: #08D966;
  --color-green-6: #06AE52;
  --color-green-7: #05823D;
  --color-green-8: #035729;
  --color-green-9: #022B14;
  --color-green-10: #000000;
  --color-green-0-5: #E6FBF0;
  --color-green-1-5: #B5F4D1;
  --color-green-8-5: #02411F;
  --color-green-9-5: #01160A;

  --color-red-0: #FFFFFF;
  --color-red-1: #F8D1D5;
  --color-red-2: #F0A4AA;
  --color-red-3: #E97680;
  --color-red-4: #E14955;
  --color-red-5: #DA1B2B;
  --color-red-6: #AE1622;
  --color-red-7: #83101A;
  --color-red-8: #570B11;
  --color-red-9: #2C0509;
  --color-red-10: #000000;
  --color-red-0-5: #FBE8EA;
  --color-red-1-5: #F4BBBF;
  --color-red-8-5: #41080D;
  --color-red-9-5: #160304;

  --color-carbon-black-0: #A5B7B4;
  --color-carbon-black-1: #899896;
  --color-carbon-black-2: #6C7977;
  --color-carbon-black-3: #505B59;
  --color-carbon-black-4: #333C3A;
  --color-carbon-black-5: #171D1C;
  --color-carbon-black-6: #121716;
  --color-carbon-black-7: #0E1111;
  --color-carbon-black-8: #090C0B;
  --color-carbon-black-9: #050606;
  --color-carbon-black-10: #000000;
  --color-carbon-black-0-5: #97A8A5;
  --color-carbon-black-1-5: #7A8986;
  --color-carbon-black-8-5: #070908;
  --color-carbon-black-9-5: #020303;

  --color-canary-yellow-0: #FFFFFF;
  --color-canary-yellow-1: #FEFEE0;
  --color-canary-yellow-2: #FEFEC0;
  --color-canary-yellow-3: #FDFDA1;
  --color-canary-yellow-4: #FDFD81;
  --color-canary-yellow-5: #FCFC62;
  --color-canary-yellow-6: #D4D44F;
  --color-canary-yellow-7: #ACAC3B;
  --color-canary-yellow-8: #858528;
  --color-canary-yellow-9: #5D5D14;
  --color-canary-yellow-10: #353501;
  --color-canary-yellow-0-5: #FFFFEF;
  --color-canary-yellow-1-5: #FEFED0;
  --color-canary-yellow-8-5: #71711E;
  --color-canary-yellow-9-5: #49490B;

  --color-blue-0: #FFFFFF;
  --color-blue-1: #DAEEFF;
  --color-blue-2: #B5DCFF;
  --color-blue-3: #90CBFF;
  --color-blue-4: #6BB9FF;
  --color-blue-5: #46A8FF;
  --color-blue-6: #3889D2;
  --color-blue-7: #2A6BA5;
  --color-blue-8: #1C4C77;
  --color-blue-9: #0E2E4A;
  --color-blue-10: #000F1D;
  --color-blue-0-5: #EDF6FF;
  --color-blue-1-5: #C8E5FF;
  --color-blue-8-5: #153D61;
  --color-blue-9-5: #071E34;

  --color-orange-0: #FFFFFF;
  --color-orange-1: #FFEED7;
  --color-orange-2: #FFDCAF;
  --color-orange-3: #FFCB86;
  --color-orange-4: #FFB95E;
  --color-orange-5: #FFA836;
  --color-orange-6: #CF882B;
  --color-orange-7: #9E6820;
  --color-orange-8: #6E4716;
  --color-orange-9: #3D270B;
  --color-orange-10: #0D0700;
  --color-orange-0-5: #FFF6EB;
  --color-orange-1-5: #FFE5C3;
  --color-orange-8-5: #563710;
  --color-orange-9-5: #251705;

  --color-gray-0: #FFFFFF;
  --color-gray-1: #ECEDEF;
  --color-gray-2: #D9DCDF;
  --color-gray-3: #C7CACF;
  --color-gray-4: #B4B9BF;
  --color-gray-5: #A1A7AF;
  --color-gray-6: #848A90;
  --color-gray-7: #686C72;
  --color-gray-8: #4B4F53;
  --color-gray-9: #2F3135;
  --color-gray-10: #121416;
  --color-gray-0-5: #F6F6F7;
  --color-gray-1-5: #E3E5E7;
  --color-gray-8-5: #3D4044;
  --color-gray-9-5: #202325;

  /* Semantic */
  --color-text-primary: var(--color-carbon-black-5);
  --color-text-muted: var(--color-gray-7);
  --color-bg-light: #FAFAFF;
  --color-bg-white: var(--color-gray-0);
  --color-bg-black: var(--color-carbon-black-5);
  --color-border-light: var(--color-gray-1);
  --color-border-divider: var(--color-gray-0-5);
  --color-border-subtle: var(--color-gray-0-5);
  --color-text-placeholder: var(--color-gray-4);
  --color-field-border: var(--color-gray-1);
  --color-field-border-hover: var(--color-gray-2);
  --color-field-border-focus: var(--color-carbon-black-5);
  --color-field-disabled: var(--color-gray-0-5);
  --color-control-border: var(--color-gray-2);
  --color-control-off: var(--color-gray-2);
  --color-button-accent-text: var(--color-canary-yellow-9-5);
  --color-focus-primary: var(--color-gray-0);
  --color-focus-neutral: var(--color-gray-6);
  --color-focus-accent: var(--color-canary-yellow-8);
  --color-focus-danger: var(--color-red-7);
  --color-nav-item-hover: var(--color-gray-1);
  --color-nav-item-active: var(--color-canary-yellow-0-5);
  --color-nav-item-active-hover: var(--color-canary-yellow-1);
  --color-nav-avatar-ring: var(--color-canary-yellow-7);
  --color-shadow-xs: color-mix(in srgb, var(--color-carbon-black-5) 5%, transparent);
  --color-button-secondary-text: var(--color-carbon-black-3);
  --color-button-secondary-border: var(--color-gray-1);
  --color-button-ghost-text: var(--color-carbon-black-4);
  --color-shadow-sm: color-mix(in srgb, var(--color-carbon-black-5) 30%, transparent);
  --color-shadow-md: color-mix(in srgb, var(--color-carbon-black-5) 20%, transparent);
  --color-cta: var(--color-carbon-black-5);
  --color-accent: var(--color-canary-yellow-5);
  --color-success: var(--color-green-5);
  --color-danger: var(--color-red-5);
  --color-info: var(--color-blue-5);
  --color-warning: var(--color-orange-5);

  /* Page tokens: dark theme by default (Semantic: bg/page, bg/surface, text/inverse, text/inverse-muted, border/default) */
  --font: "SF Pro", "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-sans: var(--font);
  --bg: var(--color-carbon-black-8);
  --surface: var(--color-carbon-black-7);
  --text: var(--color-gray-0-5);
  --muted: var(--color-gray-5);
  --border: var(--color-gray-9-5);
  --accent: var(--color-accent);
  --accent-text: var(--color-text-primary);
  --radius: 12px;
  --shadow: 0 1px 2px var(--color-shadow-sm), 0 4px 12px var(--color-shadow-md);
  --shadow-xs: 0 1px 2px color-mix(in srgb, black 5%, transparent); /* Figma: Shadow/XS */
  --shadow-default: 0 4px 6px -1px color-mix(in srgb, black 10%, transparent), 0 2px 4px -2px color-mix(in srgb, black 10%, transparent); /* Figma: shadow/shadow */
  --shadow-2xl: 0 25px 50px -12px color-mix(in srgb, var(--color-carbon-black-5) 25%, transparent);
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
}