/* frontend/css/variables.css */

/* =========================================
   FACIL IOT — VARIABLES
========================================= */

:root {

  /* =========================================
     COLORS
  ========================================= */

  --background:
    #f5f5f7;

  --surface:
    #ffffff;

  --surface-secondary:
    #fafafa;

  --text:
    #111827;

  --text-light:
    #6b7280;

  --text-primary:
    #111827;

  --text-secondary:
    #526074;

  --text-muted:
    #8b95a5;

  --border:
    rgba(0,0,0,0.08);

  --accent:
    #ff3b1d;

  --accent-dark:
    #e42d10;

  --primary:
    #2563eb;

  --primary-soft:
    #eaf2ff;

  --success:
    #34c759;

  --warning:
    #ff9500;

  --danger:
    #ff3b30;

  /* =========================================
     SHADOWS
  ========================================= */

  --shadow-sm:
    0 4px 10px rgba(0,0,0,0.04);

  --shadow-md:
    0 10px 30px rgba(0,0,0,0.06);

  --shadow-lg:
    0 30px 60px rgba(0,0,0,0.10);

  /* =========================================
     BORDER RADIUS
  ========================================= */

  --radius-sm:
    12px;

  --radius-md:
    18px;

  --radius-lg:
    28px;

  /* =========================================
     CONTAINER
  ========================================= */

  --container-width:
    1400px;

  --sidebar-width:
    226px;

  /* =========================================
     TRANSITIONS
  ========================================= */

  --transition:
    0.25s ease;
}