/* ----------------------------------
 * Design tokens
 * Made par Alsacréations
 * Nécessite les variables CSS primaires (theme.css)
 * ----------------------------------
 */

:root {
  /* Color Tokens */
  color-scheme: light dark;

  &[data-theme="light"] {
    color-scheme: light;
  }

  &[data-theme="dark"] {
    color-scheme: dark;
  }

  --primary: var(--color-blue-500);
  --on-primary: var(--color-white);
  --surface: light-dark(var(--color-white), var(--color-gray-800));
  --on-surface: light-dark(var(--color-gray-900), var(--color-gray-100));
  --on-surface-secondary: light-dark(
    var(--color-gray-600),
    var(--color-gray-300)
  );
  --layer-1: light-dark(var(--color-gray-50), var(--color-gray-900));
  --layer-2: light-dark(var(--color-gray-100), var(--color-gray-700));
  --layer-3: light-dark(var(--color-gray-200), var(--color-gray-600));
  --link: light-dark(var(--color-green-500), var(--color-orange-300));
  --link-hover: light-dark(var(--color-green-500), var(--color-orange-300));
  --selection: light-dark(var(--color-orange-300), var(--color-orange-500));
  --accent: light-dark(var(--primary), var(--color-blue-300));
  --accent-invert: light-dark(var(--color-blue-300), var(--primary));
  --warning: light-dark(var(--color-orange-500), var(--color-orange-300));
  --error: light-dark(var(--color-red-500), var(--color-red-300));
  --success: light-dark(var(--color-green-300), var(--color-green-500));
  --border-light: var(--color-gray-200);
  --border-medium: var(--color-gray-400);
  --border-dark: var(--color-gray-600);

  /* Typo Tokens */
  --text-m: clamp(var(--text-16), 0.9565rem + 0.2174vw, var(--text-18));
  --text-l: clamp(var(--text-18), 1.0761rem + 0.2174vw, var(--text-20));
  --text-xl: clamp(var(--text-20), 1.0054rem + 1.087vw, var(--text-30));
  --text-2xl: clamp(var(--text-24), 1.2065rem + 1.3043vw, var(--text-36));
  --text-3xl: clamp(var(--text-30), 1.4348rem + 1.9565vw, var(--text-48));

  /* Spacing Tokens */
  --gap-s: clamp(var(--spacing-8), 0.2955rem + 0.9091vw, var(--spacing-16));
  --gap-m: clamp(var(--spacing-16), 0.5909rem + 1.8182vw, var(--spacing-32));
  --gap-l: clamp(var(--spacing-24), 0.8864rem + 2.7273vw, var(--spacing-48));
  --gap-xl: clamp(var(--spacing-32), 0.7727rem + 5.4545vw, var(--spacing-80));
  --spacing-s: clamp(var(--spacing-8), 0.2955rem + 0.9091vw, var(--spacing-16));
  --spacing-m: clamp(
    var(--spacing-16),
    0.5909rem + 1.8182vw,
    var(--spacing-32)
  );
  --spacing-l: clamp(
    var(--spacing-24),
    0.8864rem + 2.2727vw,
    var(--spacing-48)
  );
  --spacing-xl: clamp(
    var(--spacing-32),
    0.7727rem + 5.4545vw,
    var(--spacing-80)
  );

  /* Forms Tokens */
  --form-control-background: light-dark(
    var(--color-slate-200),
    var(--color-slate-700)
  );
  --on-form-control: light-dark(var(--color-gray-900), var(--color-gray-100));
  --form-control-spacing: var(--spacing-12) var(--spacing-16);
  --form-control-border-width: 1px;
  --form-control-border-color: var(--color-gray-400);
  --form-control-border-radius: var(--radius-md);
  --checkables-border-color: var(--color-gray-400);
  --checkable-size: 1.25em;

  /* States Tokens */
  --focus-ring-color: AccentColor;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}
