/* ==========================================================
   WHALE OS Radius System v1.0
   ========================================================== */

:root{

  /* Radius Scale */
  --radius-none:0;
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-2xl:24px;
  --radius-3xl:32px;
  --radius-full:9999px;

  /* Component Radius */
  --radius-button:12px;
  --radius-input:12px;
  --radius-card:18px;
  --radius-panel:20px;
  --radius-modal:24px;
  --radius-tooltip:10px;
  --radius-badge:9999px;
  --radius-avatar:50%;
}

/* Utilities */

.rounded-none{border-radius:var(--radius-none);}
.rounded-xs{border-radius:var(--radius-xs);}
.rounded-sm{border-radius:var(--radius-sm);}
.rounded-md{border-radius:var(--radius-md);}
.rounded-lg{border-radius:var(--radius-lg);}
.rounded-xl{border-radius:var(--radius-xl);}
.rounded-2xl{border-radius:var(--radius-2xl);}
.rounded-3xl{border-radius:var(--radius-3xl);}
.rounded-full{border-radius:var(--radius-full);}

/* Components */

.card-radius{
    border-radius:var(--radius-card);
}

.panel-radius{
    border-radius:var(--radius-panel);
}

.button-radius{
    border-radius:var(--radius-button);
}

.input-radius{
    border-radius:var(--radius-input);
}

.modal-radius{
    border-radius:var(--radius-modal);
}

.badge-radius{
    border-radius:var(--radius-badge);
}

.avatar-radius{
    border-radius:var(--radius-avatar);
}