/* ==========================================================================
   ALGO TOOLS — DESIGN TOKENS
   Shared token system (Ink Navy base / Violet + Signal Teal accents).
   This file is the single source of truth for color, type, spacing,
   radius and motion across every Algo Tools product, including this
   Image Crop Tool. Keep in sync with the Image Resize Tool tokens.
   ========================================================================== */

:root {
  /* Color — Ink Navy base with Violet / Signal Teal accents */
  --c-bg: #0A0E1A;
  --c-bg-alt: #0F1526;
  --c-surface: #151C30;
  --c-surface-2: #1B233C;
  --c-border: #262F4A;
  --c-text: #F4F6FB;
  --c-text-muted: #9AA3BD;
  --c-text-faint: #6B7590;
  --c-accent: #33e496;
  --c-accent-soft: rgba(108, 92, 231, 0.14);
  --c-accent-2: #24b8fd;
  --c-accent-2-soft: rgba(22, 224, 189, 0.14);
  --c-warn: #F5A623;
  --c-danger: #EF4560;
  --c-success: #2ED573;

  --shadow-sm: 0 2px 8px rgba(4, 6, 16, 0.35);
  --shadow-md: 0 12px 32px rgba(4, 6, 16, 0.45);
  --shadow-glow: 0 0 0 1px rgba(108, 92, 231, 0.25), 0 8px 30px rgba(108, 92, 231, 0.20);

  /* Typography */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-bn: 'Noto Sans Bengali', 'Inter', sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;
  --sp-12: 6rem;
  --sp-16: 8rem;

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-full: 999px;

  /* Layout */
  --container-max: 1240px;
  --header-h: 76px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
}

[data-theme="light"] {
  --c-bg: #F6F7FB;
  --c-bg-alt: #FFFFFF;
  --c-surface: #FFFFFF;
  --c-surface-2: #EEF0F7;
  --c-border: #E1E4EE;
  --c-text: #0F1526;
  --c-text-muted: #4B5470;
  --c-text-faint: #7B849E;
  --shadow-sm: 0 2px 8px rgba(15, 21, 38, 0.06);
  --shadow-md: 0 12px 32px rgba(15, 21, 38, 0.10);
  --shadow-glow: 0 0 0 1px rgba(108, 92, 231, 0.18), 0 8px 30px rgba(108, 92, 231, 0.14);
}

/* Bengali type context: switch body/display stacks to the Bengali-safe face */
[lang="bn"] {
  --font-display: 'Noto Sans Bengali', 'Space Grotesk', sans-serif;
  --font-body: 'Noto Sans Bengali', 'Inter', sans-serif;
}