/* Design tokens ported from lib/themes/dark_theme.dart + color_resources.dart + circul_button.dart */

@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 100 450;
  font-display: swap;
  src: url('../assets/fonts/tajawal/Tajawal-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 451 650;
  font-display: swap;
  src: url('../assets/fonts/tajawal/Tajawal-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 651 900;
  font-display: swap;
  src: url('../assets/fonts/tajawal/Tajawal-700.woff2') format('woff2');
}

:root {
  /* core theme colors — dark_theme.dart */
  --color-bg: #000000;
  --color-card: #242424;
  --color-hint: #c7c7c7;
  --color-primary: #1455ac;
  --color-secondary: #ed7328;
  --color-tertiary: #865c0a;
  --color-background-alt: #2d2d2d;
  --color-on-primary: #b7d7fe;
  --color-outline: #2c66b4;
  --color-body-text: #e9eef4;

  /* accents used across specific screens */
  --color-cyan: #00ade3;
  --color-onboarding-accent: #595ee0;
  --color-connect-red: #ff5252;
  --color-green: #23cb60;
  --color-signal-green: #00e060;
  --color-signal-yellow: #ffcc00;
  --color-signal-red: #ff0000;
  --color-signal-blue-deep: #0033ff;
  --color-signal-blue-light: #0088ff;

  /* neutral / opacity ramps */
  --color-white: #ffffff;
  --color-white-54: rgba(255, 255, 255, 0.54);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-12: rgba(255, 255, 255, 0.12);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-black: #000000;
  --color-badge-bg: #282827;

  /* background radial gradient (Alignment(0.9,-0.9), radius 1.4, focalRadius .5) */
  --gradient-focal: radial-gradient(circle at 88% 4%, #484848 0%, #000000 68%);
  --gradient-focal-connect: radial-gradient(circle at 100% 0%, #484848 0%, #000000 62%);

  --font-family: 'Tajawal', -apple-system, 'Segoe UI', sans-serif;

  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 22px;
  --radius-pill: 35px;

  --space-1: 8px;
  --space-2: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;

  --dur-fast: 120ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;
  --dur-stagger: 60ms;

  --ease-enter: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic */
  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* easeInCubic */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* easeOutBack approximation */
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* elasticOut approximation */
}