/* KARETA.KZ UI TOKENS — r288
   Mandatory base design tokens for future UI work.
   This file is intentionally soft: it standardizes variables and aliases
   without mass-rewriting old component CSS in this release. */
:root{
  /* Spacing scale: only these values should be used for new UI layout. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Radius scale: project standard. */
  --radius-min: 5px;
  --radius-mid: 10px;
  --radius-max: 18px;

  /* Backward-compatible radius aliases. */
  --r-sm: var(--radius-min);
  --r-md: var(--radius-mid);
  --r-lg: var(--radius-max);
  --r-xl: var(--radius-max);
  --radius-sm: var(--radius-min);
  --radius-md: var(--radius-mid);
  --radius-lg: var(--radius-max);
  --radius-xl: var(--radius-max);
  --radius-control: var(--radius-mid);
  --radius-btn: var(--radius-mid);
  --radius-field: var(--radius-mid);
  --radius-card: var(--radius-max);
  --radius-modal: var(--radius-max);

  /* UI component radius aliases. */
  --ui-radius-sm: var(--radius-min);
  --ui-radius-md: var(--radius-mid);
  --ui-radius-lg: var(--radius-max);
  --ui-radius-xl: var(--radius-max);
  --ui-radius: var(--radius-mid);
  --ui-radius-control: var(--radius-mid);
  --ui-radius-btn: var(--radius-mid);
  --ui-radius-field: var(--radius-mid);
  --ui-radius-input: var(--radius-mid);
  --ui-radius-card: var(--radius-max);
  --ui-radius-modal: var(--radius-max);
  --ui-radius-pill: 999px;

  /* Touch and control heights. */
  --ui-btn-h-sm: 36px;
  --ui-btn-h-md: 44px;
  --ui-btn-h-lg: 48px;
  --ui-btn-h: var(--ui-btn-h-md);
  --ui-input-h: 44px;
  --ui-touch-target: 44px;

  /* Icon and typography helpers. */
  --ui-icon-sm: 16px;
  --ui-icon-md: 18px;
  --ui-icon-lg: 22px;
  --ui-text-sm: 13px;
  --ui-text-md: 15px;
  --ui-text-lg: 17px;

  /* Layering scale. Do not use random z-index values in new code. */
  --z-base: 1;
  --z-sticky: 50;
  --z-bottom-nav: 80;
  --z-dropdown: 120;
  --z-modal: 300;
  --z-toast: 500;

  /* Generic UI surface aliases. They map to existing theme variables if present. */
  --ui-surface: var(--surface, #ffffff);
  --ui-surface-2: var(--surface-2, #f6f8fb);
  --ui-surface-soft: var(--surface-soft, rgba(15,23,42,.04));
  --ui-border: var(--border, rgba(15,23,42,.12));
  --ui-border-soft: rgba(15,23,42,.08);
  --ui-border-strong: rgba(15,23,42,.18);
  --ui-shadow-card: var(--shadow-card, 0 12px 32px rgba(15,23,42,.08));
  --ui-shadow-soft: var(--shadow-soft, 0 8px 22px rgba(15,23,42,.06));
  --ui-shadow-float: var(--shadow-lg, 0 18px 48px rgba(15,23,42,.14));
}

/* Theme radius modes. These are the only supported interface radius presets. */
:root[data-radius="min"],
html[data-radius="min"],
body[data-radius="min"]{
  --ui-radius-btn: var(--radius-min);
  --ui-radius-field: var(--radius-min);
  --ui-radius-input: var(--radius-min);
  --ui-radius-card: var(--radius-min);
  --ui-radius-modal: var(--radius-min);
}

:root[data-radius="mid"],
html[data-radius="mid"],
body[data-radius="mid"],
:root[data-radius="default"],
html[data-radius="default"],
body[data-radius="default"],
:root[data-radius="solid"],
html[data-radius="solid"],
body[data-radius="solid"]{
  --ui-radius-btn: var(--radius-mid);
  --ui-radius-field: var(--radius-mid);
  --ui-radius-input: var(--radius-mid);
  --ui-radius-card: var(--radius-mid);
  --ui-radius-modal: var(--radius-mid);
}

:root[data-radius="max"],
html[data-radius="max"],
body[data-radius="max"],
:root[data-radius="round"],
html[data-radius="round"],
body[data-radius="round"],
:root[data-radius="apple"],
html[data-radius="apple"],
body[data-radius="apple"]{
  --ui-radius-btn: var(--radius-max);
  --ui-radius-field: var(--radius-max);
  --ui-radius-input: var(--radius-max);
  --ui-radius-card: var(--radius-max);
  --ui-radius-modal: var(--radius-max);
}

/* Compatibility aliases for existing local component tokens. */
:root{
  --card-radius-sm: var(--ui-radius-sm);
  --card-radius-md: var(--ui-radius-md);
  --card-radius-lg: var(--ui-radius-card);
  --kareta-card-radius: var(--ui-radius-card);
  --list-card-radius: var(--ui-radius-card);
  --list-card-radius-inner: var(--ui-radius-md);
  --tools-radius: var(--ui-radius-card);
  --myo-tools-radius: var(--ui-radius-card);
  --flow-radius-control: var(--ui-radius-control);
  --flow-radius-card: var(--ui-radius-card);
  --flow-radius-panel: var(--ui-radius-card);
  --flow-radius-pill: var(--ui-radius-pill);
  --tool-btn-h: var(--ui-btn-h-md);
}